快捷導(dǎo)航

JavaScript中this的使用詳解

更新時(shí)間：2013年11月08日 09:41:10 作者：

初學(xué)JavaScript時(shí)的我們，多多少少都拜訪過(guò)this，卻又總是找不準(zhǔn)時(shí)機(jī)，屢屢與其擦肩而過(guò)。其實(shí)this一直就在那里

我們要記住一句話：this永遠(yuǎn)指向函數(shù)運(yùn)行時(shí)所在的對(duì)象！而不是函數(shù)被創(chuàng)建時(shí)所在的對(duì)象。切記…
本文將分三種情況來(lái)分析this對(duì)象到底身處何方。
普通函數(shù)中的this
無(wú)論this身處何處，第一要?jiǎng)?wù)就是要找到函數(shù)運(yùn)行時(shí)的位置。

復(fù)制代碼代碼如下:

1 var name="全局";
2 function getName(){
3     var name="局部";
4     return this.name;
5 };
6 alert(getName());

當(dāng)this出現(xiàn)在全局環(huán)境的函數(shù)getName中時(shí)，此時(shí)函數(shù)getName運(yùn)行時(shí)的位置在

復(fù)制代碼代碼如下:

alert(getName());

顯然，函數(shù)getName所在的對(duì)象是全局對(duì)象，即window，因此this的安身之處定然在window。此時(shí)的this指向window對(duì)象，則getName返回的this.name其實(shí)是window.name，因此alert出來(lái)的是“全局”！
那么，當(dāng)this不是出現(xiàn)在全局環(huán)境的函數(shù)中，而是出現(xiàn)在局部環(huán)境的函數(shù)中時(shí)，又會(huì)身陷何方呢？

復(fù)制代碼代碼如下:

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

其中this身處的函數(shù)getName不是在全局環(huán)境中，而是處在twobin環(huán)境中。無(wú)論this身處何處，一定要找到函數(shù)運(yùn)行時(shí)的位置。此時(shí)函數(shù)getName運(yùn)行時(shí)的位置

復(fù)制代碼代碼如下:

alert(twobin.getName());

顯然，函數(shù)getName所在的對(duì)象是twobin，因此this的安身之處定然在twobin，即指向twobin對(duì)象，則getName返回的this.name其實(shí)是twobin.name，因此alert出來(lái)的是“局部”！
閉包中的this
閉包也是個(gè)不安分子，本文暫且不對(duì)其過(guò)于贅述，簡(jiǎn)而言之：所謂閉包就是在一個(gè)函數(shù)內(nèi)部創(chuàng)建另一個(gè)函數(shù)，且內(nèi)部函數(shù)訪問了外部的變量。
浪子this與痞子閉包混在一起，可見將永無(wú)寧日??！

復(fù)制代碼代碼如下:

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

此時(shí)的this明顯身處困境，竟然處在getName函數(shù)中的匿名函數(shù)里面，而該匿名函數(shù)又調(diào)用了變量name，因此構(gòu)成了閉包，即this身處閉包中。
無(wú)論this身處何處，一定要找到函數(shù)運(yùn)行時(shí)的位置。此時(shí)不能根據(jù)函數(shù)getName運(yùn)行時(shí)的位置來(lái)判斷，而是根據(jù)匿名函數(shù)的運(yùn)行時(shí)位置來(lái)判斷。

復(fù)制代碼代碼如下:

function (){
    return this.name;
};

顯然，匿名函數(shù)所在的對(duì)象是window，因此this的安身之處定然在window，則匿名函數(shù)返回的this.name其實(shí)是window.name，因此alert出來(lái)的就是“全局”！
那么，如何在閉包中使得this身處在twobin中呢？

復(fù)制代碼代碼如下:

  var name="全局";
  var twobin={
      name:"局部",
      getName:function(){
          var that=this;
          return function(){
              return that.name;
          };
      }
 };
 alert(twobin.getName()());

在getName函數(shù)中定義that=this，此時(shí)getName函數(shù)運(yùn)行時(shí)位置在
alert(twobin.getName());
則this指向twobin對(duì)象，因此that也指向twobin對(duì)象。在閉包的匿名函數(shù)中返回that.name，則此時(shí)返回的that.name其實(shí)是twobin.name，因此就可以alert出來(lái) “局部”！
call與apply中的this
在JavaScript中能管的住this的估計(jì)也就非call與apply莫屬了。
call與apply就像this的父母一般，讓this住哪它就得住哪，不得不聽話！

復(fù)制代碼代碼如下:

 var name="全局";
 var twobin={
name:"局部",
};
function getName(){
    alert(this.name);
}
getName(twobin);
getName.call(twobin);

其中this身處函數(shù)getName中。無(wú)論this身處何處，一定要找到函數(shù)運(yùn)行時(shí)的位置。此時(shí)函數(shù)getName運(yùn)行時(shí)的位置
getName(twobin);
顯然，函數(shù)getName所在的對(duì)象是window，因此this的安身之處定然在window，即指向window對(duì)象，則getName返回的this.name其實(shí)是window.name，因此alert出來(lái)的是“全局”！
那么，該call與apply登場(chǎng)了，因?yàn)閠his必須聽他們的指揮！
getName.call(twobin);
其中，call指定this的安身之處就是在twobin對(duì)象，因?yàn)閠his被迫只能在twobin那安家，則此時(shí)this指向twobin對(duì)象， this.name其實(shí)是twobin.name，因此alert出來(lái)的是“局部”！
一點(diǎn)總結(jié)
浪子this：永遠(yuǎn)指向函數(shù)運(yùn)行時(shí)所在的對(duì)象，而不是函數(shù)被創(chuàng)建時(shí)所在的對(duì)象；如果處在匿名函數(shù)中或不處于任何對(duì)象中，則this指向window對(duì)象；如果是call或apply，它指定哪個(gè)對(duì)象，則this就指向哪個(gè)對(duì)象！

您可能感興趣的文章: