在 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