This.a () vs a.call (this) in javascript

Question

• this.a()
• a.call(this)

As I understand:

• In both cases, the context will be this .
• The first option can only be used when a() is the this method.
• When searching in the code base, two options for invoking the same thing make things more complicated.

MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call

Any other difference? What are your best practices when using these two options?

Answer 1

Do not use a.call(this) when you can do this.a() , this complicates the understanding, and AFAIK you get nothing by doing this ...

call and apply are useful if you want to use a method from another "class", but with your this parameter, for example:

 var nodes = document.querySelectorAll('a') ; Array.prototype.forEach.call(nodes, callback) ; 

You cannot use nodes.forEach because nodes is a NodeList not a Array and therefore does not have a forEach method, but you can do it above.

Another use of call is when you want to force an instance of this for a callback method (for example, when creating a plugin).

 plugin.doSomething ('#id', function () { // I would like 'this' to reference my HTMLElement here }) ; 

So in doSomething you can do something like:

 function doSomething (selector, callback) { var e = document.querySelector (selector) ; // Whatever... callback.call(e) ; } 

Answer 2

One calls the a method on this , and the other calls the a function and passes the this context.

... really not so similar. Let me show you:

  (function () {
     function a () {
         alert ('global a');
     }

     function b ()
     {
         this.a = function () {
             alert ('scope of b () method a');
         }

         this.a ();  // alerts 'scope of b () method a'
         a.call (this) // alerts 'global a'
     }

     b ();
 }) (); 

See, not even necessarily calling the same function. Thus, there are definitely some worthy differences between the two. Far from identical.

IWithout IIFE surrounding it, and NOT in strict mode, they will call the same function simply because this will be global by default ... and in strict mode, with or without IIFE, this.a(); will not only call the same function, it will throw an error, since the default value of this will be undefined. Actually ... in strict mode, situations where these two lines would even call the same function in general would be quite limited.

Regarding the question of “what should I use” ... well, it depends on what you are trying to do, as they do different things! The fact that these two concepts may overlap in the right situation does not change this.

1) The this is basically the context of the function's execution or refers to an instance of the object when the function is called with the new keyword. If you are trying to refer to a function expression in the execution context from which your function was called, or trying to refer to an instance of an object created with new inside this class definition (i.e. you are executing JS class properties / methods), then you used would this.a(); for reference to this.

2) If you are trying to refer to function a in the current area, but make it work with the context that this is where the function is executing, you should use a.call(this);

3) Most likely, if you just call a function in the current scope and should not affect its context with the this , you would simply use a();

Answer 3

Yes, both cases are identical. And no one uses call or apply when you have an object and you need to call its method. Mostly, developers use them when you need to replace the context. One common case is the conversion of an object of arguments to an array:

 function fn() { var args = Array.prototype.slice.call(arguments); console.log(args); }