JavaScriptのbindメソッドによるコンテキストのバインド

次のメソッドbindは、関数にコンテキストを永続的にバインドすることを可能にします。このメソッドは結果として新しい関数を返し、その内部ではthisが厳密に指定された値を持つようになります。

例を見てみましょう。

以下のようなinput要素があるとします：

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

このinput要素への参照が変数elemに格納されているとします：

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

また、以下の関数funcがあるとします：

javascriptfunction func(param1, param2) {
  console.log(this.value + param1 + param2);
}

では、bindを使用して、関数funcのコピーでありながら、内部のthisが常にelemと等しくなる新しい関数を作成してみましょう：

javascriptlet newFunc = func.bind(elem);

これで、変数newFuncに関数が格納されました。この関数を呼び出し、最初のパラメータに'1'、2番目のパラメータに'2'を渡してみましょう（elemには'text'というvalueを持つinput要素が格納されています）：

javascriptnewFunc('1', '2');

すべてのコードをまとめてみましょう：

javascriptlet elem = document.getElementById('elem');

function func(param1, param2) {
  console.log(this.value + param1 + param2);
}

let newFunc = func.bind(elem);
newFunc('1', '2'); // 'text12'と出力される

bindの結果を新しい関数newFuncに格納する必要は必ずしもありません。単にfuncを上書きすることもできます。その後、funcは以前と同じ関数ですが、thisが厳密にバインドされています：

javascriptfunc = func.bind(elem);

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

javascriptlet elem = document.getElementById('elem');

function func(name, surname) {
  console.log(this.value + ', ' + name + ' ' + surname);
}

// ここにbind()を使用した構文を書いてください

func('John', 'Smit'); // ここで 'hello, John Smit' と出力されるはず
func('Eric', 'Luis'); // ここで 'hello, Eric Luis' と出力されるはず