JS中的this指向問(wèn)題詳細(xì)介紹

這篇文章主要介紹“JS中的this指向問(wèn)題詳細(xì)介紹”，在日常操作中，相信很多人在JS中的this指向問(wèn)題詳細(xì)介紹問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”JS中的this指向問(wèn)題詳細(xì)介紹”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

1. 什么是 this?

什么是 this呢?上邊我們說(shuō) this是一個(gè)對(duì)象，是個(gè)啥對(duì)象?咱們就來(lái)動(dòng)手敲代碼打印一下。我們最常見(jiàn)的 this是在一個(gè)函數(shù)中， JS  的函數(shù)調(diào)用有兩種方式，一種是我們直接調(diào)用，另外一種就是通過(guò) new 的方式來(lái)調(diào)用，我們通過(guò)兩種方式來(lái)打印一下 this值是否相同?。

控制臺(tái)輸出如下：

吆喝?咦?雖然都是在函數(shù)中，咋打印出來(lái)的不一樣呢?直接通過(guò)函數(shù)調(diào)用的方式打印出來(lái)的  this指向的是全局變量Window；通過(guò)new的方式調(diào)用的函數(shù)當(dāng)做為構(gòu)造函數(shù)，為了能夠創(chuàng)建一個(gè)實(shí)例對(duì)對(duì)象，它的 this值指向生成的實(shí)例對(duì)象。

那我們通過(guò)上邊的一頓亂操作，知道了 this是一個(gè)對(duì)象，但是我們不同的操作 this指向的對(duì)象是不相同的。寫到這里，知道  this是個(gè)什么東西就可以了，下面我們?cè)俾钊?this原理。

2. 如何判斷 this?

既然我們知道 this 是什么東西了，但是怎么判斷  this的值呢?也是我們上邊沒(méi)有解決的問(wèn)題。this的指向有三種情況，只要理解了這三種情況，也不用死記硬背，判斷  this如魚(yú)得水，在面試中給面試官講的滾瓜爛熟。

三種 this指向情況：

(1) 對(duì)象調(diào)用，this 指向該對(duì)象(前邊誰(shuí)調(diào)用 this 就指向誰(shuí))。

對(duì)于第一種情況，通過(guò)對(duì)象調(diào)用的方式，this指向誰(shuí)?要想一探究竟，必須動(dòng)手實(shí)踐一下。小鹿，上代碼，好嘞~。

控制臺(tái)打?。?/p>

我們通過(guò)親手測(cè)試，我們發(fā)現(xiàn) this的指向就是 obj，所以我們總結(jié)歸納為誰(shuí)調(diào)用了函數(shù)， this就指向誰(shuí)，很簡(jiǎn)單吧，我們繼續(xù)向下看。

(2) 直接調(diào)用的函數(shù)，this 指向的是全局 window 對(duì)象。

其實(shí)這也屬于第一種情況，如果我們直接在全局函數(shù)調(diào)用了函數(shù)，其實(shí)是全局的對(duì)象  Window調(diào)用了函數(shù)，根據(jù)第一條我們得出的結(jié)論，誰(shuí)調(diào)用的函數(shù)，this就指向誰(shuí)，想必你已經(jīng)知道了第二種情況 this指向的就是 Window。

(3) 通過(guò) new 的方式，this 永遠(yuǎn)被綁定在新創(chuàng)建的對(duì)象上，任何方式都改變不了 this 的指向。

第三種方式剛才我們也測(cè)試過(guò)了，this指向的是指向生成的對(duì)象實(shí)例，很多好奇的小伙伴就會(huì)問(wèn)小鹿，很好奇  new的內(nèi)部實(shí)現(xiàn)，到底做了什么，其實(shí)沒(méi)什么復(fù)雜的，不告訴你估計(jì)你也通過(guò)上邊的兩個(gè)結(jié)論可以得出。

我們從的到的結(jié)果進(jìn)行反推，通過(guò) new的方式 this 指向的是生成的對(duì)象實(shí)例，那我們猜測(cè)肯定內(nèi)部讓這個(gè)實(shí)例對(duì)象調(diào)用了函數(shù)，所以 this  才指向生成的對(duì)象實(shí)例。

真實(shí)的情況是這樣子嗎?確實(shí)是，我們  new的過(guò)程，其實(shí)在內(nèi)部創(chuàng)建了一個(gè)空對(duì)象，然后將構(gòu)造函數(shù)傳入的參數(shù)和屬性掛在了這個(gè)空對(duì)象上，然后返回了這個(gè)對(duì)象。還涉及該空對(duì)象到原型鏈的的掛載，想要具體了解，可以自己探究下，這里不多說(shuō)了。

擴(kuò)展：箭頭函數(shù)的 this 指向誰(shuí)?

我們都知道 ES6 之后，為了使用函數(shù)更加方便，在項(xiàng)目中我們會(huì)使用箭頭函數(shù)，書寫方式：

運(yùn)行程序，控制臺(tái)輸出：

我們可以得出結(jié)論，this在箭頭函數(shù)中失效了，因?yàn)檫@是由于箭頭函數(shù)沒(méi)有單獨(dú)的 this值。箭頭函數(shù)的  this與聲明所在的上下文相同。也就是說(shuō)調(diào)用箭頭函數(shù)的時(shí)候，不會(huì)隱士的調(diào)用 this參數(shù)，而是從定義時(shí)的函數(shù)繼承上下文。

有關(guān)箭頭函數(shù)這一點(diǎn)，一定要注意，面試的時(shí)候也會(huì)經(jīng)常給你刨坑哦!

3. 如何改變 this 的值?

我們對(duì) this的指向已經(jīng)把它翻了個(gè)底朝天，但是不要傲嬌，需要自己找點(diǎn)有關(guān) this 的大廠面試題去做，這樣鞏固一下加深理解。

this可以指向不同的對(duì)象，我們想要改變 this有沒(méi)有辦法呢?有的，改變  this的方法共有三種，我們具體看看這三種方法之間的實(shí)現(xiàn)和區(qū)別，也是面試重點(diǎn)哦!

(1) call 方法

call方法用來(lái)改變 this的指向，具體咱們先看實(shí)例：

控制臺(tái)輸出如下：

(2) apply 方法

我們?cè)賮?lái)看apply方法，同樣舉個(gè)例子：

控制臺(tái)輸出如下：

我們發(fā)現(xiàn)輸出的值相同，我們先不比較兩者的區(qū)別是什么，我們繼續(xù)往下看bind函數(shù)。

(3) bind 方法

我們?cè)谟?bind函數(shù)舉個(gè)例子：

控制臺(tái)輸出如下：

(4) call、apply、bind 三者的區(qū)別是什么?

我們對(duì)于三者都進(jìn)行舉例運(yùn)行了，我們開(kāi)始做總結(jié)歸納，我們先找找三者的共同點(diǎn)是什么?

共同點(diǎn)：

• 都能改變 this 指向，第一個(gè)傳遞的參數(shù)都是 this 指向的對(duì)象。

• 三者都采用的后續(xù)傳參的形式。

三者相同點(diǎn)表面上都能看出來(lái)，功能都是一樣的，但是對(duì)于不同點(diǎn)，就涉及到細(xì)節(jié)了，不知道你發(fā)現(xiàn)了沒(méi)有?

不同點(diǎn)：

• call的傳參是單個(gè)傳遞的，而 apply后續(xù)傳遞的參數(shù)是數(shù)組形式，而 bind沒(méi)有規(guī)定，傳遞值和數(shù)組都可以。

• call和 apply函數(shù)的執(zhí)行是直接執(zhí)行的，而 bind函數(shù)會(huì)返回一個(gè)函數(shù)，然后我們想要調(diào)用的時(shí)候才會(huì)執(zhí)行。

你可能會(huì)有疑惑，小鹿，難道你就是這樣表面看出的嗎?雖然我們表面可以看得出，那不妨我們自己手寫一個(gè) call、apply、和  bind的吧，看了源碼的實(shí)現(xiàn)，你會(huì)覺(jué)得這三個(gè)函數(shù)也沒(méi)有什么難的。因?yàn)樯婕暗綍r(shí)間問(wèn)題，我們就不展開(kāi)講了，小鹿把代碼貼到下邊了，感興趣的可以研究一下。

手寫 call 函數(shù)：

手寫 apply 函數(shù)：

手寫 bind 函數(shù)：

PS：如果我們使用上邊的方法改變箭頭函數(shù)的 this 指針，會(huì)發(fā)生什么情況呢?能否對(duì)齊進(jìn)行改變呢?

由于箭頭函數(shù)沒(méi)有自己的this指針，通過(guò) call() 或 apply()  方法調(diào)用一個(gè)函數(shù)時(shí)，只能傳遞參數(shù)(不能綁定this)，他們的第一個(gè)參數(shù)會(huì)被忽略。

到此，關(guān)于“JS中的this指向問(wèn)題詳細(xì)介紹”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！