Function.prototype.bind()

（標準組み込みオブジェクト ＞ Function ＞ メソッド）
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

// すでにある他の関数.bind(パラメータthis, 引数1, 引数2, ... ,引数N)
func.bind(thisArg, arg1, arg2, ... ,argN)

bindメソッドは、定義された関数に対して、thisを代入できるメソッドである。また、その名の通り関数などをbind（紐づけ）することができる。
（＝すでにある他の関数を拘束して、他のオブジェクトのパラメータ（this）や引数と結びつけ、新しい関数を生成する）

// 飛行機オブジェクト
var airplane = {
    name: '飛行機',
    fly: function(){ // bind()の対象となる関数メソッド
        console.log(this.name + 'が空を飛びます！');
    }
};
airplane.fly();  // '飛行機が空を飛びます！

// carオブジェクト
var car = {
    name: '車',
};

// bind() の場合（第１引数に carオブジェクト を指定）
var flyCar = airplane.fly.bind(car); // this.name は carオブジェクトの name'車' を参照
flyCar(); // 車が空を飛びます！

// call() の場合（比較用）
airplane.fly.call(car); // 車が空を飛びます！

動きが似ているcall()の場合と比較してみると

  • call()は呼び出した関数をthisの参照先を変更してそのまま実行できる
    （ここでは airplane.fly をそのまま実行）
  • bind()は関数の実行ではなく…
    戻り値として新しい関数を生成し返すため、無名関数を宣言するように変数 = 対象の関数.bind()で生成した関数を変数に格納してから実行する

といった違いがある。

第2引数以降を指定した場合

// 飛行機オブジェクト
var airplane = {
    name: '飛行機',
    fly: function(destination, speed){ // bind()の対象となる関数メソッド
        console.log(this.name + 'は' + destination + 'へ向かい' + speed + '飛び立ちました！');
    }
};

// 車オブジェクト
var car = {
    name: '車',
};

// bind() の場合
var flyCar = airplane.fly.bind(car, '2015年10月21日', '慌ただしく'); 
flyCar(); // 車は2015年10月21日へ向かい慌ただしく飛び立ちました！

// call() の場合（比較用）
airplane.fly.call(car, '2015年10月21日', '慌ただしく');
// 車は2015年10月21日へ向かい慌ただしく飛び立ちました！
inserted by FC2 system