this not refer to the correct instance

Question

I have these two classes

class Foo {
    name = 'Foo';

    foo() {
        const bar = new Bar(this.onSomething);
        bar.bar();
    }

    onSomething() {
        console.log(this);        //<= this where thing goes weird
    }
}

class Bar {
    name = 'Bar';
    constructor(onSomethingCallback) {
        this.onSomethingCallback = onSomethingCallback;
    }

    bar() {
        this.onSomethingCallback();
    }
}

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

when the method onSomething called , this refer to the instance of Bar class instead of Foo class.

I expect this to refer to instance of Foo since the method onSomething is in Foo

you can give context to a method call by using method.call(context,parameters) — jonathan Heindl, Apr 18 '19 at 19:25
well, if you don't bind the this context, it will loose it as you have it now :) — Icepickle, Apr 18 '19 at 19:28

score 1 · Answer 1 · answered Apr 18 '19 at 19:31

This is expected. If you bind this.onSomething, then its this will be set, otherwise, its this will be determined based on where its called from.

This is also the reason why const $ = document.getElementById; isn't usable, but const $ = document.getElementById.bind(document); is (because getElementById probably references this within).

class Foo {
    name = 'Foo';

    foo() {
        const bar = new Bar(this.onSomething.bind(this));
        bar.bar();
    }

    onSomething() {
        console.log(this);        //<= this where thing goes weird
    }
}

class Bar {
    name = 'Bar';
    constructor(onSomethingCallback) {
        this.onSomethingCallback = onSomethingCallback;
    }

    bar() {
        this.onSomethingCallback();
    }
}

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

See mdn for more info on this and bind for more details.

score 1 · Answer 2 · answered Apr 18 '19 at 19:34

Nope, that's how JS functions work. Calling a function as foo.bar() you're passing to it foo as the this context (0-th argument, if you will). A function called as this/* Bar */.onSomethingCallback() doesn't remember that it used to be a property of a different object.

And there are arrow functions, which just take the lexical this.

class Foo {
    name = 'Foo';

    foo = () => {
        const bar = new Bar(this.onSomething);
        bar.bar();
    }

    onSomething = () => {
        console.log(this);        //<= this where thing goes weird
    }
}

class Bar {
    name = 'Bar';
    constructor(onSomethingCallback) {
        this.onSomethingCallback = onSomethingCallback;
    }

    bar = () => {
        this.onSomethingCallback();
    }
}

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

There's no reason to make `foo` and `bar` class fields with arrow functions, you should keep them as methods. Only `onSomething` needs to become one. — Bergi, Apr 18 '19 at 19:55

score 0 · Answer 3 · answered Apr 18 '19 at 19:42

You are loosing context of Foo instanse because in this line this.onSomethingCallback = onSomethingCallback; you just put that function "out of context" and call it from Bar instance.

There are several preferred solutions:

bind onSomething in Foo constructor

class Foo {
  constructor () {
    this.onSomething = this.onSomething.bind(this);
  }
  ...
}

write onSomething function with arrow style

class Foo {
  onSomething = () => {...}
  ...
}

bind onSomething function just before passing it to Bar instance

class Foo {
  foo() {
    const bar = new Bar(this.onSomething.bind(this));
    ...
  }
  ...
}

this not refer to the correct instance

3 Answers3