終於來到挑戰的最後一天,今天要來談談前面提過的this關鍵字。
This關鍵字是JavaScript中一個非常重要的概念,this關鍵字或稱為this變數,是為每個EC所創建的特殊變數,因此this也是為了每個函數所創建的。
之前提到,this關鍵字是EC的三個組成部分之一,一般來說,假如一個函數使用了this關鍵字,this就會去取用該函數的所有者的值,換句話說,this關鍵字指向函數的所有者,而且它並不是靜態的,這取決於函數被呼叫的情況,而當函數被呼叫時,它的值才會被指派。
現在來分析一下呼叫函數的常見方式及使用在這些函數中的this關鍵字:
1.Method:也就是附加在物件上的函數,當物件呼叫函數時,this會指向該物件,舉例來說。
const cat = {
name: "MeowMeow",
age: 3,
soundsAngry: "Hiss",
soundsRelaxed: "Purr",
angry: function() {
return this.soundsAngry;
}
};
cat.angry();
// Hiss
2.單純呼叫函數:不當作方法來使用,也不依附在物件後,在嚴格模式之下this等於undefined,非嚴格模式時則指向global object,這可能會導致一些問題,所以應該盡量使用嚴格模式。
3.Arrow function:這並不是呼叫函數的方式,只是我們要考慮的一種情況,arrow function的特性是沒有自己的this關鍵字,而是取用父級函數(parent function)的this關鍵字,又叫做lexical this keyword,因為這是從外部的詞範疇(lexical scope)得到的this關鍵字。
4.如果函數作為事件監聽器(eventListener)被呼叫,那麼this關鍵字會指向附加了這個handler function的DOM元素。
值得一提的是,this關鍵字永遠不會指向使用它的函數以及該函數的變數環境。