Javascript Function.prototype.call ()

Question

I read several articles and he said that the next two lines do the same.

fn.call(thisValue); Function.prototype.call.call(fn, thisValue); 

In line 1, I understand that every function object in Javascript has a call method inherited from Function.prototype , and the call method is to have the this inside the fn function definition will be thisValue (the first parameter I passed in the call method fn is a function, so what I do in fn.call(thisValue) just calls fn and sets the this inside the thisValue function.

But for line 2, I do not understand. Can someone help explain what line 2 does.

Answer 1

Start with this setting:

 function fn() { console.log(this); } var thisvalue = {fn: fn}; 

Now you undoubtedly understand that thisvalue.fn() is a method call and sets the registered this value for thisvalue object.

Then you seem to know that fn.call(thisvalue) makes the exact same call. Alternatively, we could write (thisvalue.fn).call(thisvalue) (parentheses for structure only, which can be omitted) as thisvalue.fn === fn :

 thisvalue.fn(…); // is equivalent to (thisvalue.fn).call(thisvalue, …); // or: (fn).call(thisvalue, …); 

OK, but fn.call(…) is just a method call - the function call method is called on the fn function.
It may be available as such because all function objects inherit this .call property from Function.prototype - this is not a proprietary property like .fn for thisvalue object. However, fn.call === Function.prototype.call same as thisvalue.fn === fn .

Now we can rewrite this .call method .call as an explicit call with .call() :

 fn.call(thisvalue); // is equivalent to (fn.call).call(fn, thisvalue); // or: (Function.protoype.call).call(fn, thisvalue); 

I hope you notice the pattern and can now explain why the following work:

 Function.prototype.call.call.call(Function.prototype.call, fn, thisvalue); var call = Function.prototype.call; call.call(call, fn, thisvalue); 

Interrupting this is left as an exercise for the reader :-)

Answer 2

Since I ended up here trying to understand this question , I will also post my answer here.

Let's start with this:

 function fn() { console.log(this); } fn.a = function(){console.log(this)} // "this" is fn because of the . when calling fn.a() // function fn() { console.log(this); } 

So, let's go deeper and try to redefine the call function:

  Function.prototype.fakeCall = function () { // taking the arguments after the first one let arr = Array.prototype.slice.call(arguments, 1); try{ return this.apply(arguments[0], arr); }catch(e){} } function a(ar){ console.log(ar + this.name) }; let obj = {name : "thierry"}; // a.fakeCall( obj, 'hi ') Function.fakeCall.fakeCall(a, obj, 'hi '); 

Thus, when we do this: Function.prototype.fakeCall.fakeCall(a, obj, 'hi ')

what happens, at the first start we have:

• arr = [ obj, 'hi ']
• this = Function.fakeCall

so in the end we get Function.fakeCall.apply(a, [ obj, 'hi ']);

Then on the second run we have

• arr = ['hi']
• this = a

as a result, we get a.apply(obj, ['hi']) , which coincides with a.call(obj, 'hi');

a source