Skip to content

[javascript] this 到底指向誰!?

Published: at 01:13 PM (2 min read)

在 javascript 有一個特別的關鍵字 “this” 他會指向一個物件,在不同時候指向不同的物件。

一直以來我都認為,誰呼叫此函式,this就會指向誰,但好像有例外…

因此我們來看看下面的程式碼


平常常見的程式碼

[javascript] // global context,this console.log(this); function a() { console.log(this); } a(); // window // window [/javascript]

可以發現兩個 this 都會指向瀏覽器 window 這個物件

看起來蠻合理的,畢竟也是 a() 函式也等同執行 window.a()

再來看以下這段程式碼

[javascript] var c={ “name”: “camel”, “setName”: function(name){ this.name=name; } }; c.setName(“john”); console.log(c.name); // john [/javascript]

利用 c.setName() 這個方法,我們的 this 順利指向 c 這個物件,正確的設定 name。

看起來這邊的 this 也很合理的指向 c 這個物件。

接下來我們再看一個例子

[javascript] var c={ “name”: “camel”, “set”: function(name) { var setName=function(name){ this.name=name; }; setName(name); } }; c.set(“john”); console.log(c.name); console.log(name); // camel // john [/javascript]

從上面這段程式碼可以發現,雖然我們使用一個看似不直覺的寫法,但 setName() 裡面的 this 變成指向了 window。

這也就是奇怪的地方,也是常常新手學 javascript 遇到 this 奇怪的地方。

因此許多人會使用變數預先保存 this 物件。

比如更改剛剛的程式碼變成

[javascript] var c={ “name”: “camel”, “set”: function(name) {                var self=this; var setName=function(name){ self.name=name; }; setName(name); } }; c.set(“john”); console.log(c.name); console.log(name); // john // undefined [/javascript]

預先使用一個變數 self,儲存目前正確的 this 物件,避免後面 this 跑掉或發生錯誤!

參考資料: https://pjchender.blogspot.tw/2016/03/javascriptthisbug.html