Understanding javascript call function

Question

'use strict';

let worker = {
  someMethod() {
    return 4;
  },

  slow(x) {
    return x * this.somemethod();
  }
};

function wrapper(func) {
  return function(x) {
    let result = this.func(x);  // **
    return result;
  };
}

worker.slow = wrapper(worker.slow);
alert( worker.slow(2) );

When I run this code I get this error:

  TypeError:  this.func is not a function

If I replace the problematic line at ** with this:

let result = func.call(this, x);

I get the expected output. In this case it's 8.

I'm wondering why the way it's written is the wrong way to get "this" ie the object worker. In other words, how does the call function get the right object i.e. worker ?

I wrote this about what this is and isn't, maybe it will help clarify gist.github.com/ddlsmurf/4c4c56e86b6f9a647c7aeec86f90b2cc — Eric
– Eric, Commented Apr 18, 2018 at 18:02

Terry Lennox · Accepted Answer · 2018-04-18 18:06:52Z

3

The reason it's failing is that in the problematic line (highlighted with // **), you're effectively calling worker.func(x), which does not exist; You're not referring to the passed in variable at all.

If you add a function (func) to your worker, e.g.

let worker = {
  someMethod: function() {
    return 4;
  },

  slow: function(x) {
    return x * this.somemethod();
  },
  func: function (x) {
     return x * 10;
  }
};

And call as above e.g.

worker.slow = wrapper(worker.slow);
console.log( worker.slow(2) );

You'd find it works, though this is not what you really want!

edited Apr 18, 2018 at 18:06

answered Apr 18, 2018 at 17:59

Terry Lennox

30.9k5 gold badges36 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mr Wannabe Over a year ago

Excellent. Thank you !

digitake · Accepted Answer · 2018-04-18 18:47:38Z

2

In JavaScript, any function call obj.f(ArgumentList) will be desugared into f.call(obj, ArgumentList...)(see ecma-262 7.3.12)

When wrapper(worker.slow) got a call, the function slow is passed into the wrapper and it produces another function which captured func argument. However, that function returned by wrapper is not called yet.

At a moment of the function call alert( worker.slow(2) ) func mean the argument that got captured in the closure and func.call(this, x) means it will call that function with the current caller, which is worker.

Therefore, `func.call(this,x)` will be `func.call(worker, x) `
which works because `func` exists in the closure.

while this means the reference to a current caller to the function(x){ ... }

Hence, `this.func(x)` will be `worker.func(x)` 
which `func` does not exist in `worker`.

if you try to insert console.log(func) and console.log(this) in that function, you will see the difference.

edited Apr 18, 2018 at 18:47

answered Apr 18, 2018 at 18:13

digitake

8667 silver badges16 bronze badges

2 Comments

Mr Wannabe Over a year ago

Thanks for introducing the desugaring concept. I was not aware of it before. The line marked with ** will desugar to this.func.call(this, x). This is invalid per Terry's point above. Hence we need to call the primitive ourself.

Mr Wannabe Over a year ago

By the way, if anyone else is unfamiliar with desugaring read this blog: yehudakatz.com/2011/08/11/…. It helped me a lot.

Collectives™ on Stack Overflow

Understanding javascript call function

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related