Why write “.call(this)” at the end of an javascript anonymous function? [duplicate]

Answer 1

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('');.

Answer 2

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.

Answer 3

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:

1. If the function code is strict code, set the ThisBinding to thisArg.
2. Else if thisArg is null or undefined, set the ThisBinding to the global object.
3. …

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 :-)

Answer 4

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!