Why write ".call(this)" at the end of an javascript anonymous function?

Javascript

Javascript Problem Overview


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?

Javascript Solutions


Solution 1 - Javascript

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.

Solution 2 - Javascript

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! [this video]: http://www.youtube.com/watch?v=0LKDImgRfrg

Solution 3 - Javascript

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

Solution 4 - Javascript

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionzodView Question on Stackoverflow
Solution 1 - JavascriptYoshiView Answer on Stackoverflow
Solution 2 - JavascriptnetpoeticaView Answer on Stackoverflow
Solution 3 - JavascriptBergiView Answer on Stackoverflow
Solution 4 - JavascriptJakub KoneckiView Answer on Stackoverflow