原文參考(medium.freecodecamp.org/a-guide-to-…)
this 關鍵詞是Javascript中最廣為使用的並且令人誤解的詞。今天我將嘗試改變它。
當學習代詞時，讓我們回到古老的學校時代。
菲爾普斯遊得很快，因為他想贏得比賽。
注意代詞he的使用。我們在這不直接稱呼菲爾普斯但是用代詞he指代菲爾普斯。類似地，JavaScript使用this關鍵字作為指示物件來引用上下文中的物件，即主題。
例如：
在上面的程式碼中，我們有一個物件car，它有make,model和fullName屬性。
fullName的值是一個function，它可以用兩種不同的語法列印car的全稱
-
使用
this => this.make+” “ +this.model，這個this指向上下文中的物件，所以this.make實際上是car.make,並且this.model也是如此 -
使用點表示法，我們可以訪問物件的屬性
car.make和car.model。
這就是this!
現在我們已經理解了this是什麼，這只是最基礎的用法，讓我們來做一些規則以致於我們可以記住。
JS中的this關鍵詞指向它所屬的物件。
var car={
make:'....'
func:()=>{
console.log(this.make)
}
}
複製程式碼上面程式碼片段中的this屬於物件car
依賴於用法，它有不同的值
- 在一個方法裡
- 在一個函式裡
- 單獨
- 在一個事件中
call()和apply()
在一個方法裡
當this在一個方法裡使用，它指向方法所有者物件。
在一個物件中的定義的函式被叫做方法。讓我們再舉一次car的例子。
var car= {
make: "Lamborghini",
model: "Huracán",
fullName: function () {
console.log(this.make+" " +this.model);
console.log(car.make+ " " +car.model);
}
}
car.fullName();
複製程式碼fullName()在這裡是一個方法。在這個方法裡的this屬於car
在一個函式裡
在一個函式裡，this有一點複雜。首先要理解的是，與所有物件都具有屬性一樣，函式也具有屬性。無論函式何時執行，它都能獲取this屬性，該屬性是一個變數，其中包含呼叫它的物件的值。
如果函式沒有被物件呼叫，那麼函式內部的this屬於全域性物件，稱之為視窗。在這個案例裡，this將引用全域性作用域中定義的值。讓我們看一個更好理解的例子：
var make= "Mclaren";
var model= "720s"
function fullName(){
console.log(this.make+ " " + this.model);
}
var car = {
make:"Lamborghini",
model:"Huracán",
fullName:function () {
console.log (this.make + " " + this.model);
}
}
car.fullName(); // Lmborghini Huracán
window.fullName(); // Mclaren 720S
fullName(); // Mclaren 720S
複製程式碼這裡make，model和fullName是全域性定義的，而car物件也有fullName的實現。當car物件被呼叫時，這指的是在物件內定義的屬性。另一方面，其他兩個函式呼叫是相同的並返回全域性定義的屬性。
單獨
當單獨使用而不是在任何函式或物件內部時，this指的是全域性物件。
var make = 'Mclaren';
var model = '720s'
var name = 'Ferrari';
console.log(this.name); //Ferrari
複製程式碼這裡的this指的是全域性名稱屬性。
在一個事件中
事件可以是任何型別，但為了簡單和清晰起見，讓我們進行點選事件。
只要單擊一個按鈕並引發一個事件，它就可以呼叫另一個函式來根據點選執行某個任務。如果this在函式內部使用，它將引用引發事件的元素。在DOM中，所有元素都儲存為物件。這就是為什麼當引發一個事件時它會引用該元素，因為該webpage元素實際上是DOM中的一個物件。
比如：
<button onclick="this.style.display='none'">
Remove Me!
</button>
複製程式碼call()、apply()& bind()
- bind：允許我們在方法上設定this的值。
- call和apply：允許我們借用函式並在函式呼叫上設定
this的值。