JavaScript This指向問題詳解

2019-12-15   科技i關注



這篇文章主要介紹了JavaScriptThis指向問題詳解,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

各位小夥伴在面試中被面試官問道this指向問題一定不少吧,同時還被問道apply,call和bind的用法區別,現在,就來簡單的聊一聊this到底指向何方。

1.基本概念

MDN的官方解釋:與其他語言相比,函數的this關鍵字在JavaScript中的表現略有不同,此外,在嚴格模式和非嚴格模式之間也會有一些差別。在絕大多數情況下,函數的調用方式決定了this的值。this不能在執行期間被賦值,並且在每次函數被調用時this的值也可能會不同。

簡而言之:

1.this指向的對象稱為函數的上下文對象context;

2.this的指向取決於函數被調用方式

不管函數怎麼調用的天花亂墜,我們只要記住這幾點即可清晰的找出this的指向。

2.小試牛刀


面試官問你this指向哪裡,當然大聲回答不知道,原因:誰調用指向誰,函數都沒被調用,確實不知道指向。


小結:直接通過函數名來調用函數,this指向全局變量window;通過對象.函數名調用函數,this指向該對象。

3.DOM對象調用函數時this的指向問題

1.通過選擇器選擇元素加事件屬性來綁定事件,this指向該DOM對象,例子如下:


2.直接在DOM標籤中寫事件,this指向window,我們可以通過吧this作為參數傳入方法中再使用,例子如下


因為這個時候是直接調用方法的,所以this指向全局window對象,那麼問題來了,我們想判斷我們點擊的是哪一個按鈕,應該怎麼做呢,我們可以把this的值作為參數傳入方法中再使用,例子如下。


4.對象中this的指向問題

先看一個簡單的例子:


我們定義了一個全局變量a和一個列印a的全局變量方法,之後又定義了一個obj對象,其中包含a屬性和foo,bar兩個方法。當我們調用obj.foo()列印了2,調用obj.bar()列印了1.

分析:

不管printA在哪裡定義的,我們this的指向只取決於被誰調用的。在obj.foo(),foo的屬性值為printA,被obj直接調用,所以this指向obj,this.a就是obj.a=2了;

當我們調用obj.bar()時,bar的屬性值為function(){printA()},沒有明確哪個對象來調用printA方法,this默認指向全局對象window,所以this.a=window.a=1;

第三種情況我們把obj.foo值賦予了foo變量,在調用的時候就相當於是window.foo()了,列印1。

小結:this的指向不是函數聲明是綁定的,而是在函數運行過程中動態綁定的。

5.改變this的指向方法:applaycallbind

話不多話:寫了一個例子,大家先看,萬一比喻不恰當,大家能理解其中意思即可


例子很好理解,輸出的結果相信大家也能看得明白,哪天,韓梅梅想買一個盆,她買不了,因為她還沒有這個方法,她一想:我沒有這個方法,但是李雷有啊,我打電話給李雷把錢他讓他幫我買啊;後來李雷想買一個盤,實現方法也是如此。那麼,在代碼中如何實現呢?

JavaScript有好幾個方法可以實現:call,apply,bind。

call方法:

語法:call(thisObj,Object)

定義:調用一個對象的一個方法,以另一個對象替換當前對象。

說明:

call方法可以用來代替另一個對象調用一個方法。call方法可將一個函數的對象上下文從初始的上下文改變為由thisObj指定的新對象。如果沒有提供thisObj參數,那麼Global對象被用作thisObj。


apply方法:

語法:apply(thisObj,[argArray])

定義:應用某一對象的一個方法,用另一個對象替換當前對象。

說明:

如果argArray不是一個有效的數組或者不是arguments對象,那麼將導致一個TypeError。如果沒有提供argArray和thisObj任何一個參數,那麼Global對象將被用作thisObj,並且無法被傳遞任何參數。


bind方法:


小結:三種方法的相同指出是:可以改變this的指向,不同之處是:apply接受的參數為一個數組,call接收的參數為一個個獨立的值;apply,call會直接調用方法,bind改變this的指向返回一個方法不調用。

註:有些低版本的瀏覽器不支持函數使用bind方法,我們在做瀏覽器兼容時可以加以判斷,具體實現方法暫不贅述。

以上就是個人對於this的指向問題的理解,我們只需記住一點:this指向-誰調用,指向誰。不得不說JavaScript真是個奇妙的世界,文中有紕漏不足的地方,歡迎指正。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持小編。