解析Javascript中this的奧秘

前言： this 是JavaScript 比較特殊的關鍵字，運用的地方之廣，方式之靈活奠定了它的強大，但同時注定了它的難用。剛開始學的時候被繞的很暈，為了徹底弄清楚它查了很多資料。然後將自己學的東西整理了一下，以簡單易懂的方式表達出來，權當做學習筆記，同時也可以給有需要的童鞋做下參考^_^

什麼是this ？

this 關鍵字的意思是明確且具體的，即指涉當前物件。即意味著這個 this 是在某種相對情況下才成立的。

this 被分為三種情況：全域物件、目前物件或任意物件;判斷處於那種情況，這完全取決於函數的調用方式，JavaScript 中主要的函數調用有以下幾種方式：

 作為普通函數呼叫

 作為物件方法呼叫

 作為建構子呼叫

#  使用apply或call 呼叫

1. 作為普通函數呼叫

#------這是我們最常用的方法，這種呼叫方式屬於全域調用，這裡的this 指的是全域物件

function test(){
 this.a = 5;
 alert(this.a);
 alert(this);
}
test(); // 5 [object Window]

如上所示：定義在全域的函數, 函數的擁有者就是目前頁面,也就是window物件，所以example()的呼叫物件就是Window，所以這裡面的this就代表Window;

#換一種寫法:

##

var a = 5;
function test(){
 var a = 10;
 alert(this.a);
}
test(); //5

如上圖所示：test()函數內部也宣告了一個
變數a，但是呼叫test()的結果為5，說明此時函數內部的this代表了全域物件即Window;
再換種寫法：

var a = 5;
function test(){
 this.a = 10;
}
test();
alert(a); //10

#如上所示： 呼叫test()函數，更改了全域變量a的值，即表示此時this代表全域物件。


2.作為物件函數的呼叫
  ------當函數被某個物件呼叫時，此時this就指向了這個物件

var name="张三";
 var person={
  name:"李四",
  showName:function(){
   alert(this.name);
  }
 }
 person.showName(); //输出 李四
 var other=person.showName;
 other(); //输出 张三

如上圖所示：執行person.showName()的結果為李四，表示此時showName中的this指向了person;

而把person.showName賦給other後，因為other屬於全域變量，可以看成是window物件的一個
屬性。所以當呼叫other()，相當於呼叫window.other()，因此this指向了window, 輸出結果為張三；
所以說作為函數物件呼叫時，this就指向了這個呼叫的物件。


3. 作為建構子呼叫
   ------建構函數，就是透過這個函數產生一個新物件（object），這時候的this 就會指向這個新物件；

function animal(){
 this.name = "豆豆";
}
var dog = new animal();
alert(dog.name); // 输出 豆豆

如上圖所示：透過new關鍵字產生一個
object類別型的物件並把它賦給dog,執行這個建構函數的話，會吧建構函數作用域裡的this指向這個對象，在這裡就是指向了dog,因此this.name 等同於dog.name, 所以輸出結果為豆豆。

4.使用apply 或call 呼叫
   ------apply()是函數物件的一個方法，它應用某一物件的一個方法，用另一個物件替換當前物件。

var a = "张三";
function test(){
 alert(this.a);
}
var b = {};
b.a = "李四";
b.n = test;
b.n(); //李四
b.n.apply(); //张三
b.n.apply(b); //李四

如上圖：b.n()----因為呼叫的物件為b，所以this指向了b，this.a  = = b.a  ，所以結果為李四；

　　　　　b.n.apply----當apply()的參數為空時，就是沒有對象去替換當前對象，默認用全局對象，所以this指向window，結果為張三;

　　　　　b.n.apply(b)----指將當前的this指向替換成b，因此this指向了b，結果為李四

（本文參考了網上的資料和一些書籍，如有錯誤之處，歡迎指出，將及時改正，麼麼噠O(∩_∩)O）


總結：本文介紹了JavaScript 中的this 關鍵字在各種情況下的意義，實例都很簡單，這樣更能有助於加深理解。雖然這只是JavaScript 中一個很小的概念，但藉此我們可以了解JavaScript 中函數的執行環境，充分掌握this的相關知識有助於我們在編寫物件導向的JavaScript程式時能夠游刃有餘。最後，感謝您的觀看。

#

以上是解析Javascript中this的奧秘的詳細內容。更多資訊請關注PHP中文網其他相關文章！