iT邦幫忙

2021 iThome 鐵人賽

DAY 15
0
Modern Web

前端幼鳥三十天養成記系列 第 15

this指向who(下)

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

昨天小複習:預設繫結,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;

解析:

  • 倒數第二段

    • obj1log屬性logStr function地址另給變數print,執行print
    • print()等價於logStr()
  • 最後一段
    最後一段只是為了比較var print = obj1.logvar 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关键字详解


上一篇
this指向who
下一篇
ES6 幾個小重點
系列文
前端幼鳥三十天養成記30

尚未有邦友留言

立即登入留言