DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 探索Javascript中this的奧秘
探索Javascript中this的奧秘
編輯:關於JavaScript     

前言: 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程序時能夠游刃有余。最後,感謝您的觀看。 

以上就是本文的全部內容,希望本文的內容對大家的學習或者工作能帶來一定的幫助,同時也希望多多支持

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved