Javascript Function.prototype.call()

Question

I read some article and it said the following 2 line are doing the same thing.

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

For line 1, my understanding is that every function object in Javascript do have a the method call inherited from the Function.prototype and what call method does is to have the this keyword inside the function definition of fn to be thisValue(the first parameter I passed in the call method. fn is a function so what I am doing in fn.call(thisValue) is just invoking fn and set the this keyword inside the function to be thisValue.

But For line 2, I don't get it. Can someone help to explain it what the hack the line 2 is doing.

Are you sure there should be two `call` in `Function.prototype.call.call(fn, thisValue);` — Tushar, Jun 26 '15 at 13:38
Function.prototype.call.call === Function.prototype.bind, this is the same behavior — Alex, Jun 26 '15 at 13:39
regarding jQuery, `fn`is just alias for `prototype` property. — Davor Mlinaric, Jun 26 '15 at 13:40
@DavorMlinaric: This is absolutely irrelevant for this question. — Bergi, Jun 26 '15 at 14:05
@bufferoverflow76: would you mind linking the article where you've read that? Just so that we can answer in context. — Bergi, Jun 26 '15 at 14:07
In the extra, extra credit section [link](http://benalman.com/news/2012/09/partial-application-in-javascript/) — bufferoverflow76, Jun 26 '15 at 17:18

Bergi · Accepted Answer · 2015-06-26T14:21:32.877

Let's start with this setup:

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

Now you surely understand that thisvalue.fn() is a method call, and sets the logged this value to the thisvalue object.

Next, you seem to know that fn.call(thisvalue) does exactly the same call. Alternatively, we could write (thisvalue.fn).call(thisvalue) (parentheses just for structure, could 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 as well - the call method of functions is called on the fn function.
It can be accessed as such because all function objects inherit this .call property from Function.prototype - it's not an own property like .fn on the thisvalue object. However, fn.call === Function.prototype.call is the same as thisvalue.fn === fn.

Now, we can rewrite that method call of .call as an explicit invocation with .call():

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

I hope you spot the pattern and can now explain why the following work as well:

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

Breaking this down is left as an exercise to the reader :-)

`Function.prototype.call.call.call(Function.prototype.call, fn, thisvalue);` --> `(Function.prototype.call.call).call(Function.prototype.call, fn, thisvalue);` --> `Function.prototype.call.call(fn, thisvalue);` --> `(fn.call).call(fn, thisvalue) --> fn.call(thisvalue);` so, in general, the formula to simply is that: `(x.method).call(x, params...)` --> `x.method(params...)` — bufferoverflow76, Jun 29 '15 at 13:46

Ced · Answer 2 · 2017-06-12T03:36:34.197

Since I ended up here trying to understand this question, I'm gonna post my answer here as well.

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 dig deeper and try to reimplement 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 is, on the first run we have:

arr = [ obj, 'hi ']

this = Function.fakeCall

so we end up with Function.fakeCall.apply(a, [ obj, 'hi ']);

Then on the second run we have

arr = ['hi']

this = a

so we end up with a.apply(obj, ['hi']) which is the same as a.call(obj, 'hi');

source

This question has more than one facet. Your answer pertains to this one: https://stackoverflow.com/questions/40710853/how-does-function-prototype-call-work-under-the-hood — Chava Geldzahler, Jun 12 '17 at 04:00
@ChavaG I really don't see how the answer above me answers anything that wasn't already known to OP. He just said that `fn.call === Function.prototype.call` which OP knew already. — Ced, Jun 12 '17 at 04:02

Javascript Function.prototype.call()

2 Answers2

Linked