我們都知道JavaScript跟其他語言在物件導向有很大的不同
其中以this為最大的差異點,很多人常常對於這個this搞得一個頭兩個大的
而該怎麼判斷this目前指向的對象是誰呢? 則是看對於在執行this前是否有物件。
如果有物件,則this代表著該物件; 倘若沒有物件,則this代表著整個window
這聽起來很饒舌,做個範例來看就會知道了
var x = 10;
var obj = {
x: 20,
f: function(){
console.log(this.x);
var foo = function(){ console.log(this.x); }
foo();
}
};
var obj = new obj();
obj.f();
在上述的範例當中,一開始呼叫 obj.f() 這時候一開始console內的this.x會輸出20
但是接著在f()的最後一行,呼叫了foo() 此時,console內的this.x 則會輸出10
而不會是大家所想的20,原因在於foo() 內的this,因為前面並沒有物件,因此指向的是全域變數中的x,所以才會輸出10
那...該怎麼做才會能能達到我們預期的 20,20呢?
這時候我們就必須要先將物件內的this儲存起來,像這樣子:
var x = 10;
var obj = {
x: 20,
f: function(){
console.log(this.x);
var js = this; //先將當前f()內的this利用js變數儲存起來。 因為當前的this指的是這個obj物件
var foo = function(){ console.log(js.x); } //使用js取得obj這個物件內的x值
foo();
}
};
var obj = new obj();
obj.f();
我們可以透過像上面的code,預先將f()內的this暫存起來,這樣變數js就永遠都會代表obj這個物件
就不會再指向整個window了
不過這樣的做法,並不是全然之計,因為每當你重新new這個物件時,裡面的this就會被自動刷新
而這個問題,我們留在下一章來進行探討。
下一章的連結在這唷!
有興趣的讀者可以研究看看
https://dotblogs.com.tw/leo_codespace/2017/01/09/222530
以上文章敘述如有錯誤及觀念不正確,請不吝嗇指教:)
有任何家教、案子 或技術相關問題 請都歡迎聯繫我