深入理解Javascript中的this關(guān)鍵字
來(lái)源:易賢網(wǎng) 閱讀:1024 次 日期:2015-03-31 15:40:50
溫馨提示:易賢網(wǎng)小編為您整理了“深入理解Javascript中的this關(guān)鍵字”,方便廣大網(wǎng)友查閱!

這篇文章主要介紹了深入理解Javascript中的this關(guān)鍵字,本文講解了方法調(diào)用模式、函數(shù)調(diào)用模式、構(gòu)造器調(diào)用模式、apply調(diào)用模式中this的不同之處,需要的朋友可以參考下

自從接觸javascript以來(lái),對(duì)this參數(shù)的理解一直是模棱兩可。雖有過(guò)深入去理解,但卻也總感覺(jué)是那種浮于表面,沒(méi)有完全理清頭緒。

但對(duì)于this參數(shù),確實(shí)會(huì)讓人產(chǎn)生很多誤解。那么this參數(shù)到底是何方神圣?

理解this  

this是一個(gè)與執(zhí)行上下文(execution context,也就是作用域)相關(guān)的特殊對(duì)象。因此,它可以叫作上下文對(duì)象(也就是用來(lái)指明執(zhí)行上下文是在哪個(gè)上下 文中被觸發(fā)的對(duì)象)。

任何對(duì)象都可以做為上下文中的this的值。在一些對(duì)ECMAScript執(zhí)行上下文和部分this的描述中的 所產(chǎn)生誤解。this經(jīng)常被錯(cuò)誤的描述成是變量對(duì)象的一個(gè)屬性。 再重復(fù)一次:

this是執(zhí)行上下文的一個(gè)屬性,而不是變量對(duì)象的一個(gè)屬性。 這個(gè)特性非常重要,因?yàn)榕c變量相反,this從不會(huì)參與到標(biāo)識(shí)符解析過(guò)程。換句話(huà)說(shuō),在代碼中當(dāng)訪問(wèn)this的時(shí)候,它的值是直接從執(zhí)行上下文中獲取的,并不需要任何作用域鏈查找。this的值只在進(jìn)入上下文的時(shí)候進(jìn)行一次確定。

廢話(huà)不多,先看一個(gè)板栗:

代碼如下:

var test = function(){};

test.prototype = {

foo:"apple",

fun:function(){

this.foo="banana";

}

};

var myTest = new test();

myTest.fun();

console.log(myTest.hasOwnProperty("foo")); //輸出什么

console.log(myTest.hasOwnProperty("fun")); //輸出什么

hasOwnProperty:是用來(lái)判斷一個(gè)對(duì)象是否有你給出名稱(chēng)的屬性或?qū)ο蟆2贿^(guò)需要注意的是,此方法無(wú)法檢查該對(duì)象的原型鏈中是否具有該屬性,該屬性必須是對(duì)象本身的一個(gè)成員。

不知道看官們心里的答案是什么,正確的答案是true,false。

代碼如下:

console.log(myTest.hasOwnProperty("foo"));

console.log(myTest.hasOwnProperty("fun"));

true

false

要弄明白為什么是這樣,就必須要理解上面this所扮演的角色,所指代的對(duì)象。在《javascript語(yǔ)言精粹》一書(shū)中,指出了在javascript中一共有四種調(diào)用模式:

1.方法調(diào)用模式

2.函數(shù)調(diào)用模式

3.構(gòu)造器調(diào)用模式

4.apply調(diào)用模式

而在這些模式當(dāng)中,對(duì)于如何初始化關(guān)鍵參數(shù)this上是存在不同差異的。

方法調(diào)用模式

當(dāng)一個(gè)函數(shù)被保存為對(duì)象的一個(gè)屬性時(shí),我們稱(chēng)它為一個(gè)方法。當(dāng)一個(gè)方法被調(diào)用時(shí),this被綁定到該對(duì)象。注意加粗的這句是重點(diǎn):

代碼如下:

// 創(chuàng)建myObject。它有一個(gè)value屬性和一個(gè)increment方法

var myObject = {

value: 0;

increment: function(inc) {

this.value += typeof inc ==='number'?inc:1; // 接受一個(gè)可選參數(shù),如果不是數(shù)字,則默認(rèn)為數(shù)字1

}

};

myObject.increment();

console.log(myObject.value); // 1

myObject.increment(2); //傳入數(shù)字2

console.log(myObject.value); // 3

這里,方法increment可以使用this去訪問(wèn)myObject對(duì)象,所以可以改變value的值。而且,this到對(duì)象的綁定發(fā)生在調(diào)用的時(shí)候。

函數(shù)調(diào)用模式

如果一個(gè)函數(shù)并非一個(gè)對(duì)象的屬性時(shí),那么它被當(dāng)作一個(gè)函數(shù)來(lái)調(diào)用,此時(shí),this被綁定到全局對(duì)象,書(shū)上說(shuō)這是js語(yǔ)言設(shè)計(jì)的一個(gè)缺陷。倘若設(shè)計(jì)正確,當(dāng)內(nèi)部函數(shù)被調(diào)用的時(shí),this應(yīng)該仍然綁定到外部函數(shù)的this變量。拋開(kāi)對(duì)語(yǔ)言設(shè)計(jì)的正確與否討論,要當(dāng)函數(shù)調(diào)用模式時(shí)this變量依舊綁定到該對(duì)象,有如下經(jīng)典解決方案:

代碼如下:

// 給myObject增加一個(gè)double方法

var myObject = {

value: 0;

increment: function(inc) {

this.value += typeof inc ==='number'?inc:1; // 接受一個(gè)可選參數(shù),如果不是數(shù)字,則默認(rèn)為數(shù)字1

}

};

myObject.increment(2);

myObject.double = function () {

var that=this; //解決方法

var helper= function () {

that.value=add(that.value,that.value);

};

helper();

};

myObject.double(); //以方法的形式調(diào)用double

console.log(myObject.getValue()); //6

即是給該方法定義一個(gè)變量并且把它賦值為this,那么內(nèi)部函數(shù)就可以通過(guò)那個(gè)變量訪問(wèn)到this,按照約定,給那個(gè)變量命名為that。

構(gòu)造器調(diào)用模式

構(gòu)造器調(diào)用模式即是我一開(kāi)頭給出的例子所提到的。如果在一個(gè)函數(shù)前面帶上new來(lái)調(diào)用,那么將創(chuàng)建一個(gè)連接到該函數(shù)的prototype成員新對(duì)象,同時(shí)this將會(huì)被綁定到那個(gè)新對(duì)象上。聽(tīng)上去十分拗口且難以理解,先再看個(gè)demo:

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

//構(gòu)造一個(gè)名為Quo的構(gòu)造器函數(shù),帶有一個(gè)status屬性的對(duì)象

var Quo = function(string){

this.status =string;

};

Quo.prototype.get_status = function(){

return this.status;

}

var myQuo =new Quo("confuse"); //構(gòu)造一個(gè)Quo實(shí)例

console.log(myQuo.get_status()); //confuse

簡(jiǎn)單來(lái)說(shuō),Quo對(duì)象下的this在被用為構(gòu)造一個(gè)新實(shí)例即new時(shí),this指代的是新生成的myQuo對(duì)象而不是Quo對(duì)象本身。

一句話(huà),重點(diǎn)就是:原型中的this不是指的原型對(duì)象,而是調(diào)用對(duì)象。

再回過(guò)頭看一開(kāi)始的demo,就很好理解了,在執(zhí)行myTest.fun()時(shí),this指代了myTest對(duì)象,所以生成了一個(gè)foo屬性值為“banana”,所以myTest.hasOwnProperty("foo")返回值為true。

Apply調(diào)用模式

因?yàn)閖avascript是一門(mén)函數(shù)式面向?qū)ο缶幊陶Z(yǔ)言,所以函數(shù)可以擁有方法。apply方法讓我們構(gòu)建一個(gè)參數(shù)數(shù)組并用其去調(diào)用其他函數(shù),apply方法接收兩個(gè)參數(shù),第一個(gè)是將被綁定的this的值,第二個(gè)是參數(shù)數(shù)組。說(shuō)簡(jiǎn)單直接一點(diǎn)就是apply方法能劫持另外一個(gè)對(duì)象的方法,繼承另外一個(gè)對(duì)象的屬性. 推薦可以看js中apply方法的使用詳細(xì)解析 ,就不擺demo了。

學(xué)識(shí)尚淺,若文中有不正確,請(qǐng)務(wù)必指出,誤人子弟實(shí)乃大過(guò)。

更多信息請(qǐng)查看IT技術(shù)專(zhuān)欄

更多信息請(qǐng)查看數(shù)據(jù)庫(kù)
易賢網(wǎng)手機(jī)網(wǎng)站地址:深入理解Javascript中的this關(guān)鍵字
由于各方面情況的不斷調(diào)整與變化,易賢網(wǎng)提供的所有考試信息和咨詢(xún)回復(fù)僅供參考,敬請(qǐng)考生以權(quán)威部門(mén)公布的正式信息和咨詢(xún)?yōu)闇?zhǔn)!

2025國(guó)考·省考課程試聽(tīng)報(bào)名

  • 報(bào)班類(lèi)型
  • 姓名
  • 手機(jī)號(hào)
  • 驗(yàn)證碼
關(guān)于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助 | 非正式的簡(jiǎn)要咨詢(xún) | 簡(jiǎn)要咨詢(xún)須知 | 新媒體/短視頻平臺(tái) | 手機(jī)站點(diǎn) | 投訴建議
工業(yè)和信息化部備案號(hào):滇ICP備2023014141號(hào)-1 云南省教育廳備案號(hào):云教ICP備0901021 滇公網(wǎng)安備53010202001879號(hào) 人力資源服務(wù)許可證:(云)人服證字(2023)第0102001523號(hào)
云南網(wǎng)警備案專(zhuān)用圖標(biāo)
聯(lián)系電話(huà):0871-65099533/13759567129 獲取招聘考試信息及咨詢(xún)關(guān)注公眾號(hào):hfpxwx
咨詢(xún)QQ:1093837350(9:00—18:00)版權(quán)所有:易賢網(wǎng)
云南網(wǎng)警報(bào)警專(zhuān)用圖標(biāo)