How do I get a proper "this" when a class method is called by an external class with arrow functions?

Question

See the example below. Inside of a callback A.handleEvent, I was expecting "this" to be an instance of A instead of B, even though it is being called from B.

class A {
  constructor() {
    this.text = 'A';
    this.b = new B(this);
  }

  handleEvent = () => {
    console.log(this.text); // outputs 'B' instead of 'A'
  }
}

class B {
  constructor(a) {
    this.text = 'B';
    this.a = a;
    setTimeout(() => {
      this.handleEvent();
    }, 1000);
  }

  handleEvent = () => {
    this.a.handleEvent();
  }
}

there a reason you're using `handleEvent = () => {` instead of `handleEvent(){`? — Meirion Hughes, Feb 07 '18 at 20:08
The error is on this line: "// this == B instead of A :("; I'd expect "this" here to be the instance of A and not B. — Alex Groleau, Feb 07 '18 at 20:10
I understand that arrow functions lack a context, but shouldn't the context in A.handleEvent be A because of this? @PatrickRoberts — Alex Groleau, Feb 07 '18 at 20:10
@AlexGroleau no. `var that = this; class A { ... handleEvent = () => { assert(this === that) } }` — Patrick Roberts, Feb 07 '18 at 20:12
Can you post a better example? This code doesn't play nice conceptually or demo wise. — zfrisch, Feb 07 '18 at 20:13
@MeirionHughes I am trying to have "this" within A.handleEvent be the instance of A. I thought by using the arrow function, which lacks a context, "this" in A.handleEvent would always point to the A instance. This doesn't seem to be the case. — Alex Groleau, Feb 07 '18 at 20:13
@AlexGroleau don't use an arrow function. Use the class member method syntax: `handleEvent () { ... }` — Patrick Roberts, Feb 07 '18 at 20:14
@PatrickRoberts I switched both handleEvent methods to the class member syntax without arrow functions and the problem remains. — Alex Groleau, Feb 07 '18 at 20:22
https://codepen.io/dorward/pen/QQGaWj?editors=1111 — I can't reproduce the problem. It outputs A when I run it. — Quentin, Feb 07 '18 at 20:23
I cannot reproduce. Creating a `new A` does indeed output `"A"` as expected. — Bergi, Feb 07 '18 at 20:25

nloomans · Answer 1 · 2018-02-07T20:34:06.153

The example that you gave didn't work but what you probably want to do is bind the this of the function to the this of the class:

class A {
  constructor() {
    this.text = 'A';
    this.b = new B(this);

    // bind the this of handleEvent permanently to the this of the class.
    this.handleEvent = this.handleEvent.bind(this);
  }

  handleEvent = () => {
    console.log(this.text); // outputs 'A'
  }
}

class B {
  constructor(a) {
    this.text = 'B';
    this.a = a;
    setTimeout(() => {
      this.handleEvent();
    }, 1000);
  }

  handleEvent = () => {
    this.a.handleEvent();
  }
}

BTW, here is a great youtube tutorial on bind

How do I get a proper "this" when a class method is called by an external class with arrow functions?

1 Answers1