以下のクラスCのメソッドfでは、setTimeoutでメソッドmを実行する。
このときメソッドmのthisはクラスCではないため、undefinedを出力する。

メソッドmでnameフィールドの値を表示するにはどうすればいいか。

class C {
  constructor() { this.name = 'class C'; }
  f() { setTimeout(this.m, 100); }
  m() { console.log(this.name); }
}
(new C).f(); //=> undefined

アロー関数を使う

アロー関数を使えばthisが変わらない。

class D {
  constructor() { this.name = 'class D'; }
  f() { setTimeout(() => { this.m(); }, 100); }
  m() { console.log(this.name); }
}
(new D).f(); //=> class D

setTimeoutの引数にthisを渡す方法

メソッドmに引数でthisを渡す。

class E {
  constructor() { this.name = 'class E'; }
  f() { setTimeout(this.m, 100, this); }
  m(self) { console.log(self.name); }
}
(new E).f(); //=> class E

bindメソッドを使う方法

bindメソッドでthisを指定する。

class F {
  constructor() { this.name = 'class F'; }
  f() { setTimeout(this.m.bind(this), 100); }
  m() { console.log(this.name); }
}
(new F).f(); //=> class F