bindメソッド
メソッド bind は、コンテキストを関数にバインドします。
最初のパラメータとしてコンテキストを渡し、
それ以降のパラメータとして関数のパラメータを渡します。
このメソッドは新しい関数を返します。
その内部では this が渡されたコンテキストと等しくなります。
構文
関数.bind(コンテキスト, パラメータ1, パラメータ2...);
例
以下のような入力フィールドがあるとします:
<input id="elem" value="text">
この入力フィールドへの参照が変数
elem に格納されているとします:
let elem = document.querySelector('#elem');
また、次の関数
func があるとします:
function func(param1, param2) {
console.log(this.value + param1 + param2);
}
bind を使って、関数 func のコピーでありながら、
内部の this が常に elem と等しくなる新しい
関数を作成してみましょう:
let newFunc = func.bind(elem);
これで、変数 newFunc には関数が格納されました。
最初のパラメータに '1'、2番目のパラメータに '2' を渡して呼び出してみましょう:
newFunc('1', '2');
すべてをまとめてみましょう:
let 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 を上書きすることもできます:
let func = func.bind(elem);