javascript的this關(guān)鍵字定義和用法

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

this的定義

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

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

　　全局環(huán)境

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

　　vara=10;

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

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

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

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

　　varobj={name:'Tom'};

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

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

　　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;

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

　　運(yùn)用場(chǎng)景

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

　　事件回調(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í)行時(shí)，this是指向該觸發(fā)事件對(duì)應(yīng)的元素，如要this仍然以handler對(duì)象為執(zhí)行環(huán)境，則可使用函數(shù)的bind方法進(jìn)行執(zhí)行環(huán)境對(duì)象的綁定操作。

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

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

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

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

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

　　functionA(){

　　this.name='Tom';

　　this.age=20;

　　}

　　vara=newA();

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

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

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

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

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

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

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

　　bind

　　bind方法將函數(shù)體中的this指向新對(duì)象并返回一個(gè)新函數(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，因此每個(gè)函數(shù)都會(huì)具備call方法，fun.call(thisArg,arg1,arg2,...)，call方法接收的第一個(gè)參數(shù)會(huì)替換原有的this指向的執(zhí)行環(huán)境對(duì)象。

　　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ù)組對(duì)象（如函數(shù)的arguments對(duì)象）。

　　總結(jié)

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

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