前言: 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中文網其他相關文章!