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

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

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

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

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

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

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

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

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

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

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

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

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

以下の関数が与えられています：

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

以下の3つの入力欄があります：

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

callメソッドと関数funcを使用して、各入力欄のvalueを画面に出力してください。