首頁 > web前端 > js教程 > 主體

JavaScript中this的使用詳解_基礎知識

WBOY
發布: 2016-05-16 17:16:59
原創
1072 人瀏覽過

我們要記住一句話:this永遠指向函數運行時所在的物件!而不是函數被創建時所在的物件。切記…
本文將分成三種情況來分析this物件到底身處何方。
普通函數中的this
無論this身處何處,第一要務就是要找到函數運行時的位置。

複製程式碼 程式碼如下:

1 var name="";


1 var name="";
2
2
function getName(){
3     var name="局部";
4     return this.name;
5 };
複製程式碼

程式碼如下:


alert(getName());
複製程式碼


程式碼如下:


1 var name="";


1 var name="";
2
2
var twobin={
3     name:"局部",4     getName:function(){5       twobin.getName());其中this身處的函數getName不是在全域環境中,而是處在twobin環境中。無論this身處何處,一定要找到函數運行時的位置。此時函數getName運行時的位置


複製程式碼


程式碼如下:


alert(twobin. getName());


複製碼


代碼如下:


 1 var name="全局";
 2 var twobin={
 3     name:"局部",
 4     getName:function(){
 5      return this.name;
 7         };
 8     }
 9 };

複製程式碼


程式碼如下:


function (){
function (){ };顯然,匿名函數所在的物件是window,因此this的安身之處定然在window,則匿名函數傳回的this.name其實是window.name,因此alert出來的就是「全局」!
那麼,如何在閉包中讓this身處在twobin中呢? 複製程式碼 程式碼如下:

  var name="全域";
  var twobin={
      name:"局部",
             return function(){
              return that.name;
          };
}         };
}; 🎜>

在getName函數中定義that=this,此時getName函數運行時位置在
alert(twobin.getName());
則this指向twobin對象,因此that也指向twobin對象。在閉包的匿名函數中回傳that.name,則此時回傳的that.name其實是twobin.name,因此就可以alert出來 「局部」!
call與apply中的this
在JavaScript中能管的住this的估計也就非call與apply莫屬了。
call與apply就像this的父母一般,讓this住哪它就得住哪,不得不聽話!




複製程式碼
程式碼如下: var name=""; ={name:"局部",
};
function getName(){
    alert(this.name);
}
getName(twobin);
getName🎜>getName🎜>getName🎜>getName🎜>getName🎜>getName🎜>getName🎜>getName🎜>getName🎜>getName .call(twobin);


其中this身處函數getName中。無論this身處何處,一定要找到函數運行時的位置。此時函數getName執行時間的位置
getName(twobin);
顯然,函數getName所在的物件是window,因此this的安身之處定然在window,即指向window對象,則getName返回的this. name其實是window.name,所以alert出來的是「全域」!
那麼,該call與apply登場了,因為this必須聽他們的指揮!
getName.call(twobin);
其中,call指定this的安身之處就是在twobin對象,因為this被迫只能在twobin那安家,則此時this指向twobin對象, this.name其實是twobin.name,因此alert出來的是「局部」!
一點總結
浪子this:永遠指向函數運行時所在的對象,而不是函數被創建時所在的對象;如果處在匿名函數中或不處於任何對像中,則this指向window對象;如果是call或apply,它指定哪個對象,則this就指向哪個對象!
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板