Call method stored in variable without specifying this

Question

Consider the following code.

class Foo {
  num = 0;
  bar = function(arg) {
    console.log(this.num + arg);
  }
}

const foo = new Foo();
const bar = foo.bar;

foo.bar(1);

bar(2);

bar.call(foo, 3);

foo.bar(1); logs 1.

bar(2); throws Uncaught TypeError: Cannot read property 'num' of undefined.

bar.call(foo, 3); logs 3.

Is there a way to store the function foo.bar in a variable in such a way that it can be called without specifying the this object?

I know that the following would work.

const foobar = function(arg) {
  foo.bar(arg);
}

Is there a way to avoid creating the intermediary function? I want to pass methods as arguments to another function, and having to create lots of intermediary functions would really reduce code readability.

MDN: [bind](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind) — p.s.w.g, Mar 24 '19 at 22:00
Why not specify the `this` with `bind`? It's the cleanest way to do it — CertainPerformance, Mar 24 '19 at 22:01

score 1 · Answer 1 · answered Mar 24 '19 at 21:59

1

Yes, there is! You can use .bind(). Here's an example:

class Foo {
  num = 0;
  bar = function(arg) {
    console.log(this.num + arg);
  }
}

const foo = new Foo();
const bar = foo.bar.bind(foo);

bar(2);

answered Mar 24 '19 at 21:59

kognise

612
1
8
23

score 1 · Accepted Answer · answered Mar 24 '19 at 22:01

1

Define the field with an arrow function; that will let this refer to the instance:

bar = (arg) => {
  console.log(this.num + arg);
}

answered Mar 24 '19 at 22:01

trincot

317,000
35
244
286

Call method stored in variable without specifying this

2 Answers2