靈活的理解JavaScript中的this指向_javascript技巧

this是JavaScript中的關鍵字之一，在編寫程式的時候經常會用到，正確的理解和使用關鍵字this尤為重要。首先必須要說的是，this的指向在函數定義的時候是確定不了的，只有函數執行的時候才能確定this到底指向誰，實際上this的最終指向的是那個調用它的對象（這句話有些問題，後面會解釋為什麼會有問題，雖然網上大部分的文章都是這樣說的，雖然在很多情況下那樣去理解不會出什麼問題，但是實際上那樣理解是不准確的，所以在你理解this的時候會有種琢磨不透的感覺），那麼接下來我會深入的探討這個問題。

　　為什麼要學this？如果你學過函數式編程，面向對象編程，那你肯定知道做什麼用的，如果你沒有學過，那麼暫時可以不用看這篇文章，當然如果你有興趣也可以看看，畢竟這是js中必須要掌握的東西。

範例1：

function a(){
var user = "追梦子";
console.log(this.user); //undefined
console.log(this); //Window
}
a();

按照我們上面說的this最後指向的是呼叫它的物件，這裡的函數a實際上是被Window物件所點出來的，下面的程式碼就可以證明。

function a(){
var user = "追梦子";
console.log(this.user); //undefined
console.log(this);　　//Window
}
window.a();

跟上面程式碼一樣吧，其實alert也是window的屬性，也是window點出來的。

範例2：

var o = {
user:"追梦子",
fn:function(){
console.log(this.user); //追梦子
}
}
o.fn();

　　這裡的this指向的是物件是透過o.fn()執行的，那自然指向就是對象o，這裡再次強調一點，this的指向在函數創建的時候是決定不了的，在調用的時候才能決定，誰調用的就指向誰，一定要搞清楚這個。

其實例子1和例子2說的並不夠準確，下面這個例子就可以推翻上面的理論。

如果要徹底的搞懂this必須看接下來的幾個例子

範例3：

var o = {
user:"追梦子",
fn:function(){
console.log(this.user); //追梦子
}
}
window.o.fn();

　　這段程式碼和上面的那段程式碼幾乎是一樣的，但是這裡的this為什麼不是指向window，如果按照上面的理論，最終this指向的是調用它的對象，這裡先說個而外話，window是js中的全域對象，我們建立的變數其實是為window加屬性，所以這裡可以用window點o對象。

　　這裡先不解釋為什麼上面的那段程式碼this為什麼沒有指向window，我們再來看一段程式碼。

var o = {
a:10,
b:{
a:12,
fn:function(){
console.log(this.a); //12
}
}
}
o.b.fn();

　　這裡同樣也是對象o點出來的，但是同樣this並沒有執行它，那你肯定會說我一開始說的那些不就都是錯的嗎？其實也不是，只是一開始說的不準確，接下來我將補充一句話，我相信你就可以徹底的理解this的指向的問題。

　情況1：如果一個函數中有this，但是它沒有被上一級的物件所調用，那麼this指向的就是window，這裡需要說明的是在js的嚴格版中this指向的不是window，但我們這裡不探討嚴格版的問題，你想了解可以自行上網找。

　　情況2：如果一個函數中有this，這個函數有被上一級的物件所調用，那麼this指向的就是上一層的物件。

　　情況3：如果一個函數中有this，這個函數中包含多個對象，儘管這個函數是被最外層的對象所調用，this指向的也只是它上一級的對象，例子3可以證明，如果不相信，那麼接下來我們繼續看幾個例子。

var o = {
a:10,
b:{
// a:12,
fn:function(){
console.log(this.a); //undefined
}
}
}
o.b.fn();

儘管物件b中沒有屬性a，這個this指向的也是物件b，因為this只會指向它的上一層對象，不管這個對像有沒有this要的東西。

還有比較特別的情況，範例4：

var o = {
a:10,
b:{
a:12,
fn:function(){
console.log(this.a); //undefined
console.log(this); //window
}
}
}
var j = o.b.fn;
j();

這裡指的是window ，是不是有些蒙了？其實是因為你沒有理解一句話，這句話同樣至關重要。

　　this永遠指向的是最後調用它的對象，也就是看它執行的時候是誰調用的，例子4中雖然函數fn是被對象b所引用，但是在將fn賦值給變數j的時候並沒有執行所以最後指向的是window，這和例子3是不一樣的，例子3是直接執行了fn。

　　this講來講去其實就是那麼一回事，只不過在不同的情況下指向的會有些不同，上面的總結每個地方都有些小錯誤，也不能說是錯誤，而是在不同環境下情況就會有不同，所以我也沒有辦法一次解釋清楚，只能你慢慢地的去體會。

建構子版this：

function Fn(){
this.user = "追梦子";
}
var a = new Fn();
console.log(a.user); //追梦子

The reason why object a can point out the user in function Fn is because the new keyword can change the point of this and point this this to object a. Why do I say a is an object? Because using the new keyword is to create an object. Object instance. To understand this sentence, you can think about our example 3. Here we create an instance of Fn using variable a (equivalent to copying a copy of Fn into object a). At this time, it is only created and not executed. The object that calls this function Fn is object a, so this naturally points to the object, so why is there user in object Fn? Because you have copied a copy of the Fn function to object a, and using the new keyword is equivalent to copying. Ordered one.

In addition to the above, we can also change the point of this by ourselves. Regarding changing the point of this by ourselves, please see the summary of the call, apply, and bind methods in JavaScript. This article explains in detail. How do we manually change the pointer of this.

The above is the content of flexibly understanding this pointing to _javascript skills in JavaScript. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!