JavaScriptにおけるOOPのメソッドコードでのコンテキスト喪失

クラスのメソッドのソースコードを使用する際、 コンテキストが失われる可能性があります。 例を見てみましょう。 次のクラスがあるとします:

javascriptclass User {
  #name;
  
  constructor(name) {
    this.#name = name;
  }
  getName() {
    return this.#name;
  }
}

このクラスのオブジェクトを作成します:

javascriptlet user = new User('john');

メソッドのコードを変数に代入します:

javascriptlet func = user.getName;

メソッドを変数に代入した瞬間に コンテキストが失われました。これにより、メソッドコード内の this は クラスオブジェクトを指さなくなります。 試しに関数を呼び出してみましょう:

javascriptconsole.log(func()); // エラー

この問題を解決するためには、関数にコンテキストをバインドできます。 例えば、 bind を使用します:

javascriptfunc = func.bind(user);
console.log(func()); // 動作します