Why write ".call(this)" at the end of an javascript anonymous function? [duplicate]
I have seen JavaScript written like this (it was at a demonstration, and I don’t have the actual code at hand, but it was implied this was normal):
(function() {
var a = 1;
this.sayA = function() {
alert(a);
}
}).call(this);
sayA();
I suppose it is written an an anonymous function so that the variable a
is not globally available.
What could the point of the .call(this)
be? Since this function was not nested, this
was just the window. How does it differ from just writing ()
at the end?
Try this:
function Foo() {
(function () {
console.log(this);
// > Foo
}).call(this);
(function () {
console.log(this);
// > undefined in strict mode, or Window in non strict mode
})();
}
var bar = new Foo;
So, if for whatever reason you use this, it's a way to make the IIFE act as if it were a member function of Foo
, specifically when creating instances of a user-defined object type.
I was curious about this as well as I had just seen John Resig's talk about this video. Yoshi had a great answer but I had to test it in a bit in console log to understand and I thought this modification to his answer might help some people who were having trouble at first like me:
function Foo() {
this.foo = true;
(function () {
console.log("Foo = " + this.foo);
// Outputs undefined
}());
(function () {
console.log("Foo = " + this.foo);
// Outputs true
}).call(this);
(function () {
console.log(this);
// Outputs undefined in strict mode, or Window in non strict mode
// Anonymous functions usually default to the global scope
})();
}
var bar = new Foo;
It just made a little more sense to me to see the first and second ones side by side, showing that .call(this) essentially gives you the ability to pass the current context to an anonymous function.
Thanks for the question and thanks Yoshi for the clear answer!
Since this function was not nested,
this
was just the window. How does it differ from just writing()
at the end?
No - not in strict mode:
- If the function code is strict code, set the
ThisBinding
tothisArg
.- Else if
thisArg
isnull
orundefined
, set theThisBinding
to the global object.- …
In strict mode, the this
is just directly set to the given value, which is undefined
for a normal call. Therefore, .call(this)
is used to pass the global object explicitly in. You can try this in the console:
> (function() { "use strict"; console.log(this); })()
undefined
> (function() { "use strict"; console.log(this); }).call(this)
Window
It might not make a difference for sloppy code, but it's a good practise and future-compatible :-)
this
passed to the function sets the context of the execution, so inside your anonymous function this
refers to the window
.
You can than write this.alert('');
.