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());

今天來個廚神防雷

最終的輸出結果為

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在不同情況下的指向

本文章同步發布於個人部落格，有興趣的朋友也可以來逛逛~!