[javascript] this 到底指向誰!?

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

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

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


平常常見的程式碼

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

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

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

再來看以下這段程式碼

var c={
    "name": "camel",
    "setName": function(name){ this.name=name; }
};
c.setName("john");
console.log(c.name);
// john

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

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

接下來我們再看一個例子

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

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

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

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

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

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

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

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

Leave a Reply

Your email address will not be published. Required fields are marked *