javascript的this關鍵字定義和用法

本篇內容介紹了“javascript的this關鍵字定義和用法”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

this的定義

　　表示當前執行代碼的環境對象

　　因此可將this的剖析分為“全局環境”和“函數環境”兩種類型的環境對象

　　全局環境

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

　　vara=10;

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

　　函數環境

　　在函數內部，this的取值取決于函數被調用時的運行環境。

　　這里涉及到內存里的數據結構相關的知識點，當我們定義以下字面量對象時會發生一系列的關聯關系

　　varobj={name:'Tom'};

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

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

　　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()執行環境為obj對象，而obj.sub.say()的執行環境卻是obj.sub對象，而對于obj.sub來說并沒有name屬性，因此為undefined；而varsay=obj.say;則表示將say方法的內存地址賦值給全局變量，因此從全局變量name中取值。

　　運用場景

　　接下來從this在函數環境下的不同運用場景來剖析

　　事件回調函數

　　varhandler={

　　nickname:'anonymous',

　　register:function(){

　　console.log(this.nickname);

　　}

　　}

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

　　以上邏輯點擊觸發后輸出的是undefined，因為函數被當做事件觸發的回調函數執行時，this是指向該觸發事件對應的元素，如要this仍然以handler對象為執行環境，則可使用函數的bind方法進行執行環境對象的綁定操作。

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

　　在react中經常需要在回調函數中調用this.state、this.props，按照上面的分析，將當前環境對象bind到回調函數中即可。

　　如果是使用的箭頭函數定義回調函數即可無需bind，因為箭頭函數中this就是對應定義時所在的對象。

　　構造函數

　　要理解this在構造函數中的邏輯就要理清楚構造函數在實例化過程中都發生了什么。

　　functionA(){

　　this.name='Tom';

　　this.age=20;

　　}

　　vara=newA();

　　使用new命令實例化構造函數A的過程中會發生以下流程

　　創建一個空對象，作為將要返回的對象實例

　　將該空對象的原型指向構造函數的prototype屬性

　　將該空對象賦值給構造函數內部的this關鍵字

　　執行構造函數內部代碼

　　默認返回this對象（如return的為非對象類型，如數字123，會被忽略進而默認returnthis對象）

　　由以上邏輯可知道this關鍵字在構造函數中表示的是其實例對象。

　　bind

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

　　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，因此每個函數都會具備call方法，fun.call(thisArg,arg1,arg2,...)，call方法接收的第一個參數會替換原有的this指向的執行環境對象。

　　functionA(){

　　this.name='Tom';

　　this.sayName=function(){

　　console.log(this.name);

　　};

　　}

　　functionB(){

　　this.name='John';

　　}

　　vara=newA();

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

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

　　總結

　　由于javascript的EventLoop原理，決定了執行上下文會不斷變化，因此this對象誕生于表達當前的執行環境對象。

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