轉生第十九日,這一篇將會來介紹 this
,this
是 JavaScript 中很常見的關鍵字,也是很容易雷到人的關鍵字,這一篇將會集中介紹 this
是什麼。
先讓我們來稍微談一下執行環境的部分,JavaScript 有所謂的創造階段,當創造階段執行時,JavaScript 會首先創造兩個東西
window
this
this
算是滿多人 JavaScript 時,常常踩到的雷點,當然我自己也被雷過好幾次,那它到底是什麼東西呢?首先我們直接在瀏覽器開發者工具下輸入 this
看看會得到什麼 ↓
所以我們可以知道 this
就是目前的 window
,注意我說目前,原因是 this
目前是參照到 window
,為什麼這樣講呢?原因是 this 會依照你呼叫的方式而決定參照誰 或是你也可以把它理解成 this 是依照你呼叫時的環境來決定參照誰,記住這兩句話。
舉例來講剛才我們呼叫 this
是出現 window
,而這個原因是因為 this
目前是在 window
下呼叫的,所以 this
就會參照 window
,所以才會出現 window
,接下來將會做幾個範例來了解 this
。
var myname = '小明';
console.log(this.myname); // 小明
此時 this
會參照 window
,因為目前的 this
是在 window
下呼叫的,所以才能夠找到小明。
var myname = '小明';
function fu () {
console.log(this.myname);
}
fu();
此時還是會找到答案還是會找到小明,這時候只需要記得一件事情 this 會依照你呼叫的方式而決定參照誰,而我們是在 window
底下呼叫 fu();
這個函式,所以實際上是這樣子呼叫 ↓
但是基本上有一種狀況會導致 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。
本文同步發表於:https://hsiangfeng.github.io/javascript/20191004/1360608032/