JavaScript - 淺談當前的this對象歸屬

我們都知道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

以上文章敘述如有錯誤及觀念不正確,請不吝嗇指教:)

有任何家教、案子 或技術相關問題 請都歡迎聯繫我

http://www.zhenghui.idv.tw/