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

tags: ItIron2021 Javascript

前言

前兩天這樣搞下來,相信你們對this已經感到有些疲乏了,但打鐵要趁熱,我們今天就來看一下這系列最後一題與this直接相關的題目吧! 加油!

本日題目與解釋

請問下方程式碼的輸出結果為?

var hero = {
    _name: 'John Doe',
    getSecretIdentity: function (){
        return this._name;
    }
};

var stoleSecretIdentity = hero.getSecretIdentity;

console.log(stoleSecretIdentity());
console.log(hero.getSecretIdentity());

今天來個廚神防雷

thinking-day17

最終的輸出結果為

undefined
John Doe

是的,當時面試的公司就直接把網路上的題目拿下來用😂 你會覺得眼熟是很正常的。
這個題目其實相當的簡單,只要你有搞清楚前兩天的內容! 關鍵在於理解this指向哪,所以首先複習一下幾個關鍵吧!

  • 若直接呼叫this,this指向全域環境,也就是window或是global object
  • 若在函數中使用this,this指向執行該函數的物件
  • 可以用call、bind & apply改變this的指向

觀念在手,接著我們很快地來解這道題目吧! 首先下方的程式碼是回傳一個函數

var stoleSecretIdentity = hero.getSecretIdentity;

注意,雖然它是從hero物件中拉出來的函數,但並不表示這函數就指向hero物件,上述的寫法其實跟以下的寫法等價

var stoleSecretIdentity = function (){
   return this._name;
}

所以其實你還不確定這個this是指向誰的!

console.log(stoleSecretIdentity());

這裡就清楚了,在全域環境中直接執行這個函數,this會指向window或global object,不管是哪個肯定都沒有_name這個屬性,結果自然會印出undefined

緊接著看最後一段的程式碼

console.log(hero.getSecretIdentity());

這個就更簡單了,執行這個函數時它指向的是hero物件,最終自然印出John Doe囉!

如果你覺得這樣的概念相當難懂,那有兩個可能性

  1. 我講得太過於簡略
  2. 你真的對this還不夠熟

你可以選擇一個你喜歡的說法相信😉

本日核心觀念與總結

核心觀念

this

總結

  • 複習this在不同情況下的指向

發表迴響

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

WordPress.com 標誌

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

Twitter picture

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

Facebook照片

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

連結到 %s