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

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

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

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

let user = new User('john');

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

let func = user.getName;

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

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

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

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