Javascript是一門(mén)基于對(duì)象的動(dòng)態(tài)語(yǔ)言，也就是說(shuō)，所有東西都是對(duì)象，一個(gè)很典型的例子就是函數(shù)也被視為普通的對(duì)象。
其中this就是實(shí)現(xiàn)面向?qū)ο蟮囊粋€(gè)非常重要的特性，但是 this在Javascript非常容易理解錯(cuò)，尤其是對(duì)于接觸靜態(tài)語(yǔ)言比較久的同學(xué)來(lái)說(shuō)。而且 this又是面試中和實(shí)際項(xiàng)目中的重中之重，不得不單獨(dú)拿出一篇文章來(lái)把它理解透透的。
上面說(shuō)到this參數(shù)是面向?qū)ο驤avascript編程的一個(gè)重要組成部分，代表函數(shù)調(diào)用相關(guān)聯(lián)的對(duì)象，也稱(chēng)為函數(shù)上下文。我知道，你可能是個(gè)初學(xué) JS 的同學(xué)，聽(tīng)不懂，沒(méi)關(guān)系，不用擔(dān)心，因?yàn)橄旅孢€有動(dòng)畫(huà)來(lái)更好的理解。
什么是 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ì)象是不相同的。寫(xiě)到這里，知道 this是個(gè)什么東西就可以了，下面我們?cè)俾钊?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ù)和屬性?huà)煸诹诉@個(gè)空對(duì)象上，然后返回了這個(gè)對(duì)象。還涉及該空對(duì)象到原型鏈的的掛載，想要具體了解，可以自己探究下，這里不多說(shuō)了。
擴(kuò)展：箭頭函數(shù)的 this 指向誰(shuí)？
我們都知道 ES6 之后，為了使用函數(shù)更加方便，在項(xiàng)目中我們會(huì)使用箭頭函數(shù)，書(shū)寫(xiě)方式：
運(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)常給你刨坑哦！
我們對(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è)例子：
我們發(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)：
1、都能改變 this 指向，第一個(gè)傳遞的參數(shù)都是 this 指向的對(duì)象。
2、三者都采用的后續(xù)傳參的形式。
三者相同點(diǎn)表面上都能看出來(lái)，功能都是一樣的，但是對(duì)于不同點(diǎn)，就涉及到細(xì)節(jié)了，不知道你發(fā)現(xiàn)了沒(méi)有？
不同點(diǎn)：
1、call的傳參是單個(gè)傳遞的，而 apply后續(xù)傳遞的參數(shù)是數(shù)組形式，而 bind沒(méi)有規(guī)定，傳遞值和數(shù)組都可以。
2、call和 apply函數(shù)的執(zhí)行是直接執(zhí)行的，而 bind函數(shù)會(huì)返回一個(gè)函數(shù)，然后我們想要調(diào)用的時(shí)候才會(huì)執(zhí)行。
你可能會(huì)有疑惑，小鹿，難道你就是這樣表面看出的嗎？雖然我們表面可以看得出，那不妨我們自己手寫(xiě)一個(gè) call、apply、和 bind的吧，看了源碼的實(shí)現(xiàn)，你會(huì)覺(jué)得這三個(gè)函數(shù)也沒(méi)有什么難的。因?yàn)樯婕暗綍r(shí)間問(wèn)題，我們就不展開(kāi)講了，小鹿把代碼貼到下邊了，感興趣的可以研究一下。
1、手寫(xiě) call 函數(shù)
3、手寫(xiě) 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ì)被忽略。
今天我們認(rèn)識(shí)了 JS 中 this的使用，想必?zé)o論你是初學(xué)者還是已經(jīng)接觸過(guò) JS 的小伙伴，這篇文章應(yīng)該基本可以看明白，文章可能寫(xiě)的比較 low，小鹿的能力就這么大了，還需要后續(xù)和大佬好好學(xué)習(xí)，爭(zhēng)取寫(xiě)出更高難度和質(zhì)量的文章分享給大家。
最后，每次文章寫(xiě)作加上作圖需要好幾個(gè)小時(shí)，原創(chuàng)真心不容易，點(diǎn)個(gè)贊、發(fā)個(gè)Blink，感謝各位小伙伴們的支持！
【作者】：小鹿
【原創(chuàng)公眾號(hào)】：小鹿動(dòng)畫(huà)學(xué)編程。
【簡(jiǎn)介】：和小鹿同學(xué)一起用動(dòng)畫(huà)的方式從零基礎(chǔ)學(xué)編程，將 Web前端領(lǐng)域、數(shù)據(jù)結(jié)構(gòu)與算法、網(wǎng)絡(luò)原理等通俗易懂的呈獻(xiàn)給小伙伴。先定個(gè)小目標(biāo)，原創(chuàng) 1000 篇的動(dòng)畫(huà)技術(shù)文章，和各位小伙伴共同努力一起學(xué)習(xí)！
聯(lián)系客服
