每日挑戰,從Javascript面試題目了解一些你可能忽略的概念 – Day15

tags: ItIron2021 Javascript

前言

前兩天我們把重點放在by reference & by value的差別,並利用陣列與物件的複製作為實例講解,今天我們繼續看新的主題吧!

本日題目與解釋

請解釋在javascript中什麼是this

thinking-day15

來了…讓許多初學者為之卻步、進階者含糊不清的東西終於出現了! 很多人一提到這玩意就開始慌不然就是會用但不太確定這玩意是啥,但其實並沒有這麼複雜! 如果要用一句話來解釋的話

  • this就是目前指向的execution context(我找不到貼切的翻譯,還是用英文吧)

execution context你也不用想得太複雜,你可以想像成一個將你程式碼包裹起來的執行環境,每一次的執行都會創造一個新的execution context,而這個執行環境會隨著你目前所在的地方、設置而有所不同,以上是最最最簡略的說明,若有興趣的朋友可以自行探究(關於這個部分我強烈推薦一套課程:Understanding Javascript the weird parts,我當時是看這個課程學到這個概念的)。

聽了這麼多你可能還是覺得…我剛剛看了什麼,沒事,這感覺我可以理解,我們就用一個題目來看看吧!(執行環境為瀏覽器)

var name = '全域阿婆'
var auntie = {
  name: '漂亮阿姨',
  callName: function () { 
    console.log('2:此時的this指向', this);
    console.log('2:callName', this.name);
  }
}

function callName() {
  console.log('1:此時的this指向', this);
  console.log('1:callName', this.name);
}

callName()
auntie.callName()
console.log('3:此時的this指向', this)

// 輸出結果

1:此時的this指向 Window
1:callName 全域阿婆

2:此時的this指向 {name: '漂亮阿姨', callName: f()}
2:callName 漂亮阿姨

3:此時的this指向 Window

以上的結果可以歸納成兩個結論,絕大多數的情況你只要依賴這兩個結論就可以應付問題了!

  1. 若直接呼叫this,this會指向目前的execution context,在瀏覽器中就是window,在nodejs中則是global object
  2. 若this在函數中呼叫,this會指向執行這個函數的物件

把這個兩結論記在心裡,我們回頭來看一下題目的三種情況

1: this在函數內執行,但這個函數還是掛在window下方,所以執行這個函數的是window物件,因此this指向全域的windows。
2: this在函數內執行,但這個函數掛在auntie物件下方,執行這個函數的是auntie物件,所以this指向auntie物件。
3: this在全域執行,它指向目前的execution context,在瀏覽器中就是window,所以最後this指向全域的windows。

如何? 其實沒這麼複雜對嗎? 那為什麼我說絕大多數情況呢? 原因在於還是有一些方法會影響this的指向,常見的方法/情況有

  1. 箭頭函數
  2. call、bind & apply
  3. strict mode

在嚴格模式下this會指向undefined
strict mode
第1&第2點則會在之後的文章帶到,暫時你先知道這些就可以囉!

本日核心觀念與總結

核心觀念

this、execution context

總結

  • 了解什麼是this
  • 了解不同情況下this的指向可能會改變

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s