本篇內(nèi)容介紹了“javascript的this關(guān)鍵字定義和用法”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

創(chuàng)新互聯(lián)建站專注于企業(yè)成都全網(wǎng)營銷、網(wǎng)站重做改版、黔江網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5技術(shù)、成都商城網(wǎng)站開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為黔江等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

this的定義

表示當(dāng)前執(zhí)行代碼的環(huán)境對象

因此可將this的剖析分為“全局環(huán)境”和“函數(shù)環(huán)境”兩種類型的環(huán)境對象

全局環(huán)境

console.log(this===window);//true

vara=10;

console.log(this.a);//10

函數(shù)環(huán)境

在函數(shù)內(nèi)部，this的取值取決于函數(shù)被調(diào)用時的運(yùn)行環(huán)境。

這里涉及到內(nèi)存里的數(shù)據(jù)結(jié)構(gòu)相關(guān)的知識點(diǎn)，當(dāng)我們定義以下字面量對象時會發(fā)生一系列的關(guān)聯(lián)關(guān)系

varobj={name:'Tom'};

javascript引擎會先在內(nèi)存中生成{name:'Tom'}對象，接著再把這個對象的內(nèi)存地址賦值給obj變量，所以obj變量保存的只是一個內(nèi)存地址而已，如果要獲取obj.name，javascript引擎會先從obj變量中拿到內(nèi)存地址，然后從該地址中獲取原始對象，再返回name屬性。

而屬性值為函數(shù)時，該函數(shù)會被保存在內(nèi)存中，然后將該內(nèi)存地址賦值給該屬性，因此該地址賦值給不同環(huán)境執(zhí)行時它的作用域是不一樣的，而this對象就是指向函數(shù)當(dāng)前的執(zhí)行環(huán)境對象，執(zhí)行環(huán)境是會在EventLoop（事件循環(huán)）過程中變化的，因此this在函數(shù)環(huán)境下是屬于運(yùn)行時的。

varname='Tom';

varobj={

name:'Iceberg',

say:function(){

console.log('mynameis'+this.name);

},

sub:{

say:function(){

console.log('mynameis'+this.name);

}

}

};

obj.say();//mynameisIceberg

obj.sub.say()//mynameisundefined;

varsay=obj.say;

say();//mynameisTom;

上面的例子說明obj.say()執(zhí)行環(huán)境為obj對象，而obj.sub.say()的執(zhí)行環(huán)境卻是obj.sub對象，而對于obj.sub來說并沒有name屬性，因此為undefined；而varsay=obj.say;則表示將say方法的內(nèi)存地址賦值給全局變量，因此從全局變量name中取值。

運(yùn)用場景

接下來從this在函數(shù)環(huán)境下的不同運(yùn)用場景來剖析

事件回調(diào)函數(shù)

varhandler={

nickname:'anonymous',

register:function(){

console.log(this.nickname);

}

}

$('#registerBtn').on('click',handler.register);//undefined

以上邏輯點(diǎn)擊觸發(fā)后輸出的是undefined，因?yàn)楹瘮?shù)被當(dāng)做事件觸發(fā)的回調(diào)函數(shù)執(zhí)行時，this是指向該觸發(fā)事件對應(yīng)的元素，如要this仍然以handler對象為執(zhí)行環(huán)境，則可使用函數(shù)的bind方法進(jìn)行執(zhí)行環(huán)境對象的綁定操作。

$('#registerBtn').on('click',handler.register.bind(handler));//anonymous

在react中經(jīng)常需要在回調(diào)函數(shù)中調(diào)用this.state、this.props，按照上面的分析，將當(dāng)前環(huán)境對象bind到回調(diào)函數(shù)中即可。

如果是使用的箭頭函數(shù)定義回調(diào)函數(shù)即可無需bind，因?yàn)榧^函數(shù)中this就是對應(yīng)定義時所在的對象。

構(gòu)造函數(shù)

要理解this在構(gòu)造函數(shù)中的邏輯就要理清楚構(gòu)造函數(shù)在實(shí)例化過程中都發(fā)生了什么。

functionA(){

this.name='Tom';

this.age=20;

}

vara=newA();

使用new命令實(shí)例化構(gòu)造函數(shù)A的過程中會發(fā)生以下流程

創(chuàng)建一個空對象，作為將要返回的對象實(shí)例

將該空對象的原型指向構(gòu)造函數(shù)的prototype屬性

將該空對象賦值給構(gòu)造函數(shù)內(nèi)部的this關(guān)鍵字

執(zhí)行構(gòu)造函數(shù)內(nèi)部代碼

默認(rèn)返回this對象（如return的為非對象類型，如數(shù)字123，會被忽略進(jìn)而默認(rèn)returnthis對象）

由以上邏輯可知道this關(guān)鍵字在構(gòu)造函數(shù)中表示的是其實(shí)例對象。

bind

bind方法將函數(shù)體中的this指向新對象并返回一個新函數(shù)

functionA(){

https://www.ryw168.com/news/cases/14912.html

this.nickname='Tom';

this.say=function(){

console.log(this.nickname);

}

}

varb={nickname:'John'};

vara=newA();

varsay=a.say;

varsay1=a.say.bind(a);

varsay2=a.say.bind(b);

say();//undefined

https://www.ryw168.com/news/cases/14913.html

say1();//Tom

say2();//John

call&apply

call方法是指Function.prototype.call，因此每個函數(shù)都會具備call方法，fun.call(thisArg,arg1,arg2,...)，call方法接收的第一個參數(shù)會替換原有的this指向的執(zhí)行環(huán)境對象。

functionA(){

this.name='Tom';

this.sayName=function(){

console.log(this.name);

};

}

functionB(){

this.name='John';

}

vara=newA();

a.sayName.call(newB());//John

而apply方法與call的區(qū)別僅在于call接收參數(shù)列表而apply接收數(shù)組參數(shù)或者類數(shù)組對象（如函數(shù)的arguments對象）。

總結(jié)

由于javascript的EventLoop原理，決定了執(zhí)行上下文會不斷變化，因此this對象誕生于表達(dá)當(dāng)前的執(zhí)行環(huán)境對象。

“javascript的this關(guān)鍵字定義和用法”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！