JavaScript中this的使用詳解
更新時(shí)間:2013年11月08日 09:41:10 作者:
初學(xué)JavaScript時(shí)的我們,多多少少都拜訪過this,卻又總是找不準(zhǔn)時(shí)機(jī),屢屢與其擦肩而過。其實(shí)this一直就在那里
我們要記住一句話:this永遠(yuǎn)指向函數(shù)運(yùn)行時(shí)所在的對象!而不是函數(shù)被創(chuàng)建時(shí)所在的對象。切記…
本文將分三種情況來分析this對象到底身處何方。
普通函數(shù)中的this
無論this身處何處,第一要?jiǎng)?wù)就是要找到函數(shù)運(yùn)行時(shí)的位置。
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í)的位置在
alert(getName());
顯然,函數(shù)getName所在的對象是全局對象,即window,因此this的安身之處定然在window。此時(shí)的this指向window對象,則getName返回的this.name其實(shí)是window.name,因此alert出來的是“全局”!
那么,當(dāng)this不是出現(xiàn)在全局環(huán)境的函數(shù)中,而是出現(xiàn)在局部環(huán)境的函數(shù)中時(shí),又會身陷何方呢?
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)境中。無論this身處何處,一定要找到函數(shù)運(yùn)行時(shí)的位置。此時(shí)函數(shù)getName運(yùn)行時(shí)的位置
alert(twobin.getName());
顯然,函數(shù)getName所在的對象是twobin,因此this的安身之處定然在twobin,即指向twobin對象,則getName返回的this.name其實(shí)是twobin.name,因此alert出來的是“局部”!
閉包中的this
閉包也是個(gè)不安分子,本文暫且不對其過于贅述,簡而言之:所謂閉包就是在一個(gè)函數(shù)內(nèi)部創(chuàng)建另一個(gè)函數(shù),且內(nèi)部函數(shù)訪問了外部的變量。
浪子this與痞子閉包混在一起,可見將永無寧日?。?BR>
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身處閉包中。
無論this身處何處,一定要找到函數(shù)運(yùn)行時(shí)的位置。此時(shí)不能根據(jù)函數(shù)getName運(yùn)行時(shí)的位置來判斷,而是根據(jù)匿名函數(shù)的運(yùn)行時(shí)位置來判斷。
function (){
return this.name;
};
顯然,匿名函數(shù)所在的對象是window,因此this的安身之處定然在window,則匿名函數(shù)返回的this.name其實(shí)是window.name,因此alert出來的就是“全局”!
那么,如何在閉包中使得this身處在twobin中呢?
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對象,因此that也指向twobin對象。在閉包的匿名函數(shù)中返回that.name,則此時(shí)返回的that.name其實(shí)是twobin.name,因此就可以alert出來 “局部”!
call與apply中的this
在JavaScript中能管的住this的估計(jì)也就非call與apply莫屬了。
call與apply就像this的父母一般,讓this住哪它就得住哪,不得不聽話!
var name="全局";
var twobin={
name:"局部",
};
function getName(){
alert(this.name);
}
getName(twobin);
getName.call(twobin);
其中this身處函數(shù)getName中。無論this身處何處,一定要找到函數(shù)運(yùn)行時(shí)的位置。此時(shí)函數(shù)getName運(yùn)行時(shí)的位置
getName(twobin);
顯然,函數(shù)getName所在的對象是window,因此this的安身之處定然在window,即指向window對象,則getName返回的this.name其實(shí)是window.name,因此alert出來的是“全局”!
那么,該call與apply登場了,因?yàn)閠his必須聽他們的指揮!
getName.call(twobin);
其中,call指定this的安身之處就是在twobin對象,因?yàn)閠his被迫只能在twobin那安家,則此時(shí)this指向twobin對象, this.name其實(shí)是twobin.name,因此alert出來的是“局部”!
一點(diǎn)總結(jié)
浪子this:永遠(yuǎn)指向函數(shù)運(yùn)行時(shí)所在的對象,而不是函數(shù)被創(chuàng)建時(shí)所在的對象;如果處在匿名函數(shù)中或不處于任何對象中,則this指向window對象;如果是call或apply,它指定哪個(gè)對象,則this就指向哪個(gè)對象!
本文將分三種情況來分析this對象到底身處何方。
普通函數(shù)中的this
無論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所在的對象是全局對象,即window,因此this的安身之處定然在window。此時(shí)的this指向window對象,則getName返回的this.name其實(shí)是window.name,因此alert出來的是“全局”!
那么,當(dāng)this不是出現(xiàn)在全局環(huán)境的函數(shù)中,而是出現(xiàn)在局部環(huán)境的函數(shù)中時(shí),又會身陷何方呢?
復(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)境中。無論this身處何處,一定要找到函數(shù)運(yùn)行時(shí)的位置。此時(shí)函數(shù)getName運(yùn)行時(shí)的位置
復(fù)制代碼 代碼如下:
alert(twobin.getName());
顯然,函數(shù)getName所在的對象是twobin,因此this的安身之處定然在twobin,即指向twobin對象,則getName返回的this.name其實(shí)是twobin.name,因此alert出來的是“局部”!
閉包中的this
閉包也是個(gè)不安分子,本文暫且不對其過于贅述,簡而言之:所謂閉包就是在一個(gè)函數(shù)內(nèi)部創(chuàng)建另一個(gè)函數(shù),且內(nèi)部函數(shù)訪問了外部的變量。
浪子this與痞子閉包混在一起,可見將永無寧日?。?BR>
復(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身處閉包中。
無論this身處何處,一定要找到函數(shù)運(yùn)行時(shí)的位置。此時(shí)不能根據(jù)函數(shù)getName運(yùn)行時(shí)的位置來判斷,而是根據(jù)匿名函數(shù)的運(yùn)行時(shí)位置來判斷。
復(fù)制代碼 代碼如下:
function (){
return this.name;
};
顯然,匿名函數(shù)所在的對象是window,因此this的安身之處定然在window,則匿名函數(shù)返回的this.name其實(shí)是window.name,因此alert出來的就是“全局”!
那么,如何在閉包中使得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對象,因此that也指向twobin對象。在閉包的匿名函數(shù)中返回that.name,則此時(shí)返回的that.name其實(shí)是twobin.name,因此就可以alert出來 “局部”!
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中。無論this身處何處,一定要找到函數(shù)運(yùn)行時(shí)的位置。此時(shí)函數(shù)getName運(yùn)行時(shí)的位置
getName(twobin);
顯然,函數(shù)getName所在的對象是window,因此this的安身之處定然在window,即指向window對象,則getName返回的this.name其實(shí)是window.name,因此alert出來的是“全局”!
那么,該call與apply登場了,因?yàn)閠his必須聽他們的指揮!
getName.call(twobin);
其中,call指定this的安身之處就是在twobin對象,因?yàn)閠his被迫只能在twobin那安家,則此時(shí)this指向twobin對象, this.name其實(shí)是twobin.name,因此alert出來的是“局部”!
一點(diǎn)總結(jié)
浪子this:永遠(yuǎn)指向函數(shù)運(yùn)行時(shí)所在的對象,而不是函數(shù)被創(chuàng)建時(shí)所在的對象;如果處在匿名函數(shù)中或不處于任何對象中,則this指向window對象;如果是call或apply,它指定哪個(gè)對象,則this就指向哪個(gè)對象!
您可能感興趣的文章:
- javascript中的self和this用法小結(jié)
- javascript運(yùn)行機(jī)制之this詳細(xì)介紹
- javaScript中的this示例學(xué)習(xí)詳解及工作原理
- JavaScript四種調(diào)用模式和this示例介紹
- Javascript淺談之this
- Javascript之this關(guān)鍵字深入解析
- 5分鐘理解JavaScript中this用法分享
- JavaScript中的this關(guān)鍵字介紹與使用實(shí)例
- JavaScript中幾個(gè)重要的屬性(this、constructor、prototype)介紹
- 你必須知道的Javascript知識點(diǎn)之"this指針"的應(yīng)用
- javascript中onclick(this)用法介紹
- javascript中this做事件參數(shù)相關(guān)問題解答
- JavaScript中this關(guān)鍵詞的使用技巧、工作原理以及注意事項(xiàng)
相關(guān)文章
JavaScript 學(xué)習(xí)筆記二 字符串拼接
JavaScript 字符串拼接的一些知識點(diǎn)分析,對于提高效率等,都是非常值得一看的。2010-03-03Javascript 普通函數(shù)和構(gòu)造函數(shù)的區(qū)別
這篇文章主要介紹了Javascript 普通函數(shù)和構(gòu)造函數(shù)的區(qū)別的相關(guān)資料,需要的朋友可以參考下2016-11-11有關(guān)JavaScript中call()和apply() 的一些理解
下面小編就為大家?guī)硪黄嘘P(guān)JavaScript中call()和apply() 的一些理解。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05Javascript基礎(chǔ)知識(一)核心基礎(chǔ)語法與事件模型
這篇文章主要介紹了Javascript用途及語法,傳統(tǒng)事件及現(xiàn)代事件,是最近這段時(shí)間個(gè)人學(xué)習(xí)javascript的一些心得,分享給大家,有需要的朋友可以參考下2014-09-09javascript學(xué)習(xí)筆記(十) js對象 繼承
javascript學(xué)習(xí)筆記之js對象 繼承介紹,需要的朋友可以參考下2012-06-06