EP.19 RE：從零開始的學習 JS 生活-第十九日之 this

前言

轉生第十九日，這一篇將會來介紹 this，this 是 JavaScript 中很常見的關鍵字，也是很容易雷到人的關鍵字，這一篇將會集中介紹 this 是什麼。

this 能吃嗎

先讓我們來稍微談一下執行環境的部分，JavaScript 有所謂的創造階段，當創造階段執行時，JavaScript 會首先創造兩個東西

• window
• this

this 算是滿多人 JavaScript 時，常常踩到的雷點，當然我自己也被雷過好幾次，那它到底是什麼東西呢?首先我們直接在瀏覽器開發者工具下輸入 this 看看會得到什麼 ↓

所以我們可以知道 this 就是目前的 window，注意我說目前，原因是 this 目前是參照到 window，為什麼這樣講呢?原因是 this 會依照你呼叫的方式而決定參照誰 或是你也可以把它理解成 this 是依照你呼叫時的環境來決定參照誰，記住這兩句話。

舉例來講剛才我們呼叫 this 是出現 window，而這個原因是因為 this 目前是在 window 下呼叫的，所以 this 就會參照 window，所以才會出現 window，接下來將會做幾個範例來了解 this。

範例 1

var myname = '小明';
console.log(this.myname); // 小明

此時 this 會參照 window，因為目前的 this 是在 window 下呼叫的，所以才能夠找到小明。

範例 2

var myname = '小明';
function fu () {
  console.log(this.myname);
}

fu();

此時還是會找到答案還是會找到小明，這時候只需要記得一件事情 this 會依照你呼叫的方式而決定參照誰，而我們是在 window 底下呼叫 fu(); 這個函式，所以實際上是這樣子呼叫 ↓

範例 3

但是基本上有一種狀況會導致 this 出現錯誤 VM130:4 Uncaught TypeError: Cannot read property 'myname' of undefined，那就是 "use strict" 中文又稱嚴格模式，而嚴格模式的使用方式非常簡單，只需要在程式碼最前面加入即可運作。

"use strict"
var myname = '小明';
function fu () {
  console.log(this.myname);
}

fu();

依照 ES5 的說法就是

若在非嚴格模式下 this 會指向全域 (window)，但在嚴格模式就會因為安全上的考量而禁止 this 指向全域，簡單來講 this 只要一指向全域 (window) 就會變成 undefined 或是出現 Cannot read property XXX of undefined 的錯誤訊息。

那麼要解決這個問題的方式其實很簡單，只要讓它改變呼叫方式即可，例如將函式與變數放入物件中並透過物件呼叫該函式 ↓

"use strict"
function fu () {
  console.log(this.myname);
}

var a = {
  myname: '小明',
  qq: fu,
};

a.qq();

那麼從圖片來看 this 的指向就像這樣 ↓

所以由此可以 this 的指向來自我們於如何呼叫它，如果我們在物件中呼叫，那麼它就會指向該物件。

結尾

下一篇的 RE：從零開始的學習 JS 生活-第二十日 將會介紹 BOM。