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

前言

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

this 能吃嗎

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

  • window
  • this

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

出現 window

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

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

範例 1

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

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

範例 2

1
2
3
4
5
6
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" 中文又稱嚴格模式,而嚴格模式的使用方式非常簡單,只需要在程式碼最前面加入即可運作。

1
2
3
4
5
6
7
"use strict"
var myname = '小明';
function fu () {
console.log(this.myname);
}

fu();

依照 ES5 的說法就是

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

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

1
2
3
4
5
6
7
8
9
10
11
"use strict"
function fu () {
console.log(this.myname);
}

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

a.qq();

小明

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

this 指向物件 a

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

結尾

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

0%