this
這個特別的變數或說關鍵字,一樣也是在建立函式的執行環境(execution context)的時候就會一起建立,但因為箭頭函式(arrow function)沒有自己的this,所以只有一般函式(function declaration, function expression)會有this關鍵字。
在介紹不同環境的this究竟是指向誰之前,首先有幾個點要注意:
- 大致來說,
this
指的是「有該函式的擁有者」,這一點等會在說明this指向就會一目瞭然; this
不會指向函式本身,而且也不會指向函式的variable environment object;this
不是靜態(static)的,this
的值取決於函式是如何被呼叫,而且只有在函式真的被呼叫的時候才會有值(意即,函式宣告時this並沒有值)
接著就來分析函式在不同情況下被呼叫時,this
的值為何?
以下共分為六種狀況:
物件方法(method):此時this指的是呼叫這個函式方法的物件本身。
一般的函式呼叫(general function call):此時的this值為
undefined
;不過在嚴格模式(strict mode)下,this是指window object。箭頭函式(arrow function):箭頭函式沒有自己的this,箭頭函式的this值是指箭頭函式所在位置(lexical this)或者周圍距離最近函式
- 譬如箭頭函式是在全域範疇被呼叫,則此時的this值就是window object。
- 或者箭頭函式是在一個物件方法被呼叫,這時距離這個箭頭函式最近的函式即"物件方法",物件方法的this會指向物件本身,所以這個箭頭函式的this就是物件本身。
事件監聽器(event listener):this指的是呼叫這個事件的DOM物件元素。
call、apply、bind:一般來說,this的值即是call、apply或bind綁定的物件。
new:用new關鍵字創建的物件。
References
The Complete JavaScript Course 2023: From Zero to Expert!