JavaScriptにおけるcallメソッドを用いたコンテキストのバインド

これまでに、thisが実際にどのように機能するかを理解しました。 次に、関数がどのコンテキストで呼び出されるかを強制的に指定する（つまり、thisが何に等しいかを強制的に設定する）メソッドを見ていきましょう。

最初に取り上げるメソッドはcallです。例を使ってその動作を見てみましょう。まず、以下のような入力欄があるとします：

html<input id="elem" value="text">

この入力欄への参照を取得し、変数elemに代入しましょう：

javascriptlet elem = document.querySelector('#elem');

次に、関数funcを作成し、その内部でthis.valueを出力します：

javascriptfunction func() {
  console.log(this.value);
}

現時点では、この関数はthisが何を参照しているのかを知りません。 addEventListenerを通じてバインドすれば分かりますが、今回はそうしません。 代わりに、単に関数を呼び出し、thisがelemであるべきだと指定します。

それは次のように行います：func.call(elem)。 このコードは、thisがelemに等しいという条件付きで、関数funcをfunc()のように単純に呼び出すのと同等です。

したがって、callメソッドの構文は次の通りです：関数.call(オブジェクト)。 すべてをまとめてみましょう：

javascriptlet elem = document.querySelector('#elem');

function func() {
  console.log(this.value); // 入力欄のvalueを出力
}
func.call(elem);

javascriptfunction func() {
  console.log(this.value);
}

html<input id="elem1" value="text1">
<input id="elem2" value="text2">
<input id="elem3" value="text3">