調用function時，常會在function內的一堆動作中看到this關鍵字，而this就是記錄呼叫function的object。

昨天小複習：預設繫結，this預設的是window；隱含繫結，this綁定的是將function設定為method並呼叫他的object。

呼叫function的方法 與 this指向的「呼叫function的物件」 (下)

四種繫結

• 預設繫結
• 隱含繫結
• 明確繫結
• new繫結

明確繫結(Explicit Binding)

• 甚麼時候使用when ：使用內建function → call , apply , bind呼叫function時
• this跟誰綁who ：
  • 第一個參數
  • 沒有指定或填null：window(全域物件)

基本上call和apply一樣，差在apply參數要放在偽數組裡，call直接用逗號隔開
bind就差很多，bind回傳一個function，而且他強制綁定一個物件，之後再變也沒用

• call 和apply 語法
  • function名.call(想綁定this的物件,參數1,參數2,...,參數n)
  • function名.apply(想綁定this的物件,[參數1,參數2,...,參數n])

var str = 'Here is
 Global',
		obj1={str:'Here is Obj1', log:logStr},
		obj2={str:'Here is Obj2'};
function logStr(){
	var str = 'Here is Local';
	console.log(this.str)
}

logStr.call(obj1);
logStr.call(obj2);
logStr.call(null);
logStr.call();

logStr.apply(obj1);
logStr.apply(obj2);
logStr.apply(null);
logStr.apply();

logStr();                         
var print = obj1.log;
print();
print.call(obj2);

var afterRunLog = obj1.log();
afterRunLog;

解析：

• 倒數第二段

  • 把obj1的log屬性的logStr function地址另給變數print，執行print。
  • print()等價於logStr()

• 最後一段
  最後一段只是為了比較var print = obj1.log 和var afterRunLog = obj1.log()

  • 沒有小括號，是把logStr function地址另給變數print
  • 有小括號，是把logStr function執行完後的結果，另給變數afterRunLog

• apply通常用在參數不固定數量時

//要寫一個不固定參數的add
function add(...x){
	var total =0;
	for(let i=0;i<x.length;i++){
		total = total + x[i]
	}
	return total
}

add.apply(null,[1,2,3,4,5]);

• bind 回傳一個強制綁定單一物件的function

var str = 'Here is Global',
		obj1={str:'Here is Obj1', log:logStr},
		obj2={str:'Here is Obj2'};
function logStr(){
	var str = 'Here is Local';
	console.log(this.str)
}

var logObj1 = logStr.bind(obj1);
logObj1();
logObj1.call(obj1);
logObj1.apply(obj2);
logObj1.call();

var dobBindObj2 = logObj1.bind(obj2);
dobBindObj2();
dobBindObj2.call(obj1);
dobBindObj2.apply(obj2);
dobBindObj2.call();

解析：

• 倒數第二段
  • logStr.bind(obj1) 用bind綁定obj1，不管後面再用call , apply綁都沒有用
• 最後一段
  如果再用bind綁第二次，有辦法改變this指向嗎?
  這PART留給你試 程式碼都打給你了，不試太可惜惹~~

new繫結(Constructor Calls with new)

• 甚麼時候使用when ：用new呼叫function作為建立object的constructor
• this跟誰綁who ：新建立的object

var str = 'Here is Global';
function logStr(){
	var str = 'Here is Local';
	//小心要切換成"" 因為I'm
	//會報錯Uncaught SyntaxError: Unexpected identifier
	this.str="Hi I'm New";
};

var objNew = new logStr();
console.log(objNew.str);

總結this的指向

• 預設是window
• 隱含是調用他的object
• 明確是第一個參數
• new是新建的object

參考資料

JavaScript - This (1) - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天
JS中this关键字详解