[Note] JS: this


Posted by urlun0404 on 2022-12-04

this 這個特別的變數或說關鍵字,一樣也是在建立函式的執行環境(execution context)的時候就會一起建立,但因為箭頭函式(arrow function)沒有自己的this,所以只有一般函式(function declaration, function expression)會有this關鍵字。

在介紹不同環境的this究竟是指向誰之前,首先有幾個點要注意:

  • 大致來說,this 指的是「有該函式的擁有者」,這一點等會在說明this指向就會一目瞭然;
  • this 不會指向函式本身,而且也不會指向函式的variable environment object;
  • this 不是靜態(static)的this 的值取決於函式是如何被呼叫,而且只有在函式真的被呼叫的時候才會有值(意即,函式宣告時this並沒有值)


接著就來分析函式在不同情況下被呼叫時,this 的值為何?
以下共分為六種狀況:

  1. 物件方法(method):此時this指的是呼叫這個函式方法的物件本身

  2. 一般的函式呼叫(general function call):此時的this值為 undefined;不過在嚴格模式(strict mode)下,this是指window object。

  3. 箭頭函式(arrow function):箭頭函式沒有自己的this,箭頭函式的this值是指箭頭函式所在位置(lexical this)或者周圍距離最近函式

    • 譬如箭頭函式是在全域範疇被呼叫,則此時的this值就是window object。
    • 或者箭頭函式是在一個物件方法被呼叫,這時距離這個箭頭函式最近的函式即"物件方法",物件方法的this會指向物件本身,所以這個箭頭函式的this就是物件本身。
  4. 事件監聽器(event listener):this指的是呼叫這個事件的DOM物件元素。

  5. call、apply、bind:一般來說,this的值即是call、apply或bind綁定的物件。

  6. new:用new關鍵字創建的物件。



References
The Complete JavaScript Course 2023: From Zero to Expert!


#frontend #javascript







Related Posts

Estimation – ML & MAP 介紹

Estimation – ML & MAP 介紹

Create-react-app 錯誤訊息

Create-react-app 錯誤訊息

[ js 筆記 ] 閉包 Closure

[ js 筆記 ] 閉包 Closure


Comments