call, apply, bind

by tea4two

JavaScript

var obj = {
	num: 2,
};

var obj2 = {
	num: 5
}

var addToThis = function(a, b, c) {
  console.log('thisの正体: ', this);
	return this.num + a + b + c;
};
// エラーを起こすパターン numはaddToThis自体には無い
console.log(addToThis(2));

// 関数にオブジェクトを読み込み実行？？？
// 関数A.call(オブジェクト名, 関数Aに渡すパラメータ値)
console.log('call test: ', addToThis.call(obj, 2, 4, 6));



// 関数A.apply(オブジェクト名, 配列)
// 配列の数は関数Aのパラメータ数に合わせておく！！
console.log('apply test: ', addToThis.apply(obj2, [2,4,6]));


// 関数A.bind(オブジェクト名)
// 返り値がオブジェクトを乗っけた後の関数A自身が返る
// 実行はされない。
// bindする際にパラメータを渡すことも可能（無くてもOK）
// var bound = addToThis.bind(obj2, [2,3,4]);
var bound = addToThis.bind(obj2);
console.dir(bound(1,2,3));


/* 
まとめ
call, apply, bindを実行した際に重要なことは
関数は乗っけたオブジェクトに紐づくこと。以下のような状態になる
var obj = {
	obj: 3,
  関数A: function() {
  	...
  }
}
なので this の内容はそのオブジェクトになるということ。

*/