建站
咨詢
售后
建站咨詢
新聞中心
Javascript是一門基于對(duì)象的動(dòng)態(tài)語言，也就是說，所有東西都是對(duì)象，一個(gè)很典型的例子就是函數(shù)也被視為普通的對(duì)象。
目前創(chuàng)新互聯(lián)建站已為千余家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)絡(luò)空間、網(wǎng)站運(yùn)營、企業(yè)網(wǎng)站設(shè)計(jì)、合江網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。
其中this就是實(shí)現(xiàn)面向?qū)ο蟮囊粋€(gè)非常重要的特性，但是 this在Javascript非常容易理解錯(cuò)，尤其是對(duì)于接觸靜態(tài)語言比較久的同學(xué)來說。而且 this又是面試中和實(shí)際項(xiàng)目中的重中之重，不得不單獨(dú)拿出一篇文章來把它理解透透的。
上面說到this參數(shù)是面向?qū)ο驤avascript編程的一個(gè)重要組成部分，代表函數(shù)調(diào)用相關(guān)聯(lián)的對(duì)象，也稱為函數(shù)上下文。我知道，你可能是個(gè)初學(xué) JS 的同學(xué)，聽不懂，沒關(guān)系，不用擔(dān)心，因?yàn)橄旅孢€有動(dòng)畫來更好的理解。
思維導(dǎo)圖
1. 什么是 this?
什么是 this呢?上邊我們說 this是一個(gè)對(duì)象，是個(gè)啥對(duì)象?咱們就來動(dòng)手敲代碼打印一下。我們最常見的 this是在一個(gè)函數(shù)中， JS 的函數(shù)調(diào)用有兩種方式，一種是我們直接調(diào)用，另外一種就是通過 new 的方式來調(diào)用，我們通過兩種方式來打印一下 this值是否相同?。
控制臺(tái)輸出如下：
吆喝?咦?雖然都是在函數(shù)中，咋打印出來的不一樣呢?直接通過函數(shù)調(diào)用的方式打印出來的 this指向的是全局變量Window；通過new的方式調(diào)用的函數(shù)當(dāng)做為構(gòu)造函數(shù)，為了能夠創(chuàng)建一個(gè)實(shí)例對(duì)對(duì)象，它的 this值指向生成的實(shí)例對(duì)象。
那我們通過上邊的一頓亂操作，知道了 this是一個(gè)對(duì)象，但是我們不同的操作 this指向的對(duì)象是不相同的。寫到這里，知道 this是個(gè)什么東西就可以了，下面我們?cè)俾钊?this原理。
2. 如何判斷 this?
既然我們知道 this 是什么東西了，但是怎么判斷 this的值呢?也是我們上邊沒有解決的問題。this的指向有三種情況，只要理解了這三種情況，也不用死記硬背，判斷 this如魚得水，在面試中給面試官講的滾瓜爛熟。
三種 this指向情況：
(1) 對(duì)象調(diào)用，this 指向該對(duì)象(前邊誰調(diào)用 this 就指向誰)。
對(duì)于第一種情況，通過對(duì)象調(diào)用的方式，this指向誰?要想一探究竟，必須動(dòng)手實(shí)踐一下。小鹿，上代碼，好嘞~。
控制臺(tái)打?。?/p>
我們通過親手測(cè)試，我們發(fā)現(xiàn) this的指向就是 obj，所以我們總結(jié)歸納為誰調(diào)用了函數(shù)， this就指向誰，很簡單吧，我們繼續(xù)向下看。
(2) 直接調(diào)用的函數(shù)，this 指向的是全局 window 對(duì)象。
其實(shí)這也屬于第一種情況，如果我們直接在全局函數(shù)調(diào)用了函數(shù)，其實(shí)是全局的對(duì)象 Window調(diào)用了函數(shù)，根據(jù)第一條我們得出的結(jié)論，誰調(diào)用的函數(shù)，this就指向誰，想必你已經(jīng)知道了第二種情況 this指向的就是 Window。
(3) 通過 new 的方式，this 永遠(yuǎn)被綁定在新創(chuàng)建的對(duì)象上，任何方式都改變不了 this 的指向。
第三種方式剛才我們也測(cè)試過了，this指向的是指向生成的對(duì)象實(shí)例，很多好奇的小伙伴就會(huì)問小鹿，很好奇 new的內(nèi)部實(shí)現(xiàn)，到底做了什么，其實(shí)沒什么復(fù)雜的，不告訴你估計(jì)你也通過上邊的兩個(gè)結(jié)論可以得出。
我們從的到的結(jié)果進(jìn)行反推，通過 new的方式 this 指向的是生成的對(duì)象實(shí)例，那我們猜測(cè)肯定內(nèi)部讓這個(gè)實(shí)例對(duì)象調(diào)用了函數(shù)，所以 this 才指向生成的對(duì)象實(shí)例。
真實(shí)的情況是這樣子嗎?確實(shí)是，我們 new的過程，其實(shí)在內(nèi)部創(chuàng)建了一個(gè)空對(duì)象，然后將構(gòu)造函數(shù)傳入的參數(shù)和屬性掛在了這個(gè)空對(duì)象上，然后返回了這個(gè)對(duì)象。還涉及該空對(duì)象到原型鏈的的掛載，想要具體了解，可以自己探究下，這里不多說了。
擴(kuò)展：箭頭函數(shù)的 this 指向誰?
我們都知道 ES6 之后，為了使用函數(shù)更加方便，在項(xiàng)目中我們會(huì)使用箭頭函數(shù)，書寫方式：
運(yùn)行程序，控制臺(tái)輸出：
我們可以得出結(jié)論，this在箭頭函數(shù)中失效了，因?yàn)檫@是由于箭頭函數(shù)沒有單獨(dú)的 this值。箭頭函數(shù)的 this與聲明所在的上下文相同。也就是說調(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有沒有辦法呢?有的，改變 this的方法共有三種，我們具體看看這三種方法之間的實(shí)現(xiàn)和區(qū)別，也是面試重點(diǎn)哦!
(1) call 方法
call方法用來改變 this的指向，具體咱們先看實(shí)例：
控制臺(tái)輸出如下：
(2) apply 方法
我們?cè)賮砜碼pply方法，同樣舉個(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)行了，我們開始做總結(jié)歸納，我們先找找三者的共同點(diǎn)是什么?
共同點(diǎn)：
- 都能改變 this 指向，第一個(gè)傳遞的參數(shù)都是 this 指向的對(duì)象。
- 三者都采用的后續(xù)傳參的形式。
三者相同點(diǎn)表面上都能看出來，功能都是一樣的，但是對(duì)于不同點(diǎn)，就涉及到細(xì)節(jié)了，不知道你發(fā)現(xiàn)了沒有?
不同點(diǎn)：
- call的傳參是單個(gè)傳遞的，而 apply后續(xù)傳遞的參數(shù)是數(shù)組形式，而 bind沒有規(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ì)覺得這三個(gè)函數(shù)也沒有什么難的。因?yàn)樯婕暗綍r(shí)間問題，我們就不展開講了，小鹿把代碼貼到下邊了，感興趣的可以研究一下。
手寫 call 函數(shù)：
手寫 apply 函數(shù)：
手寫 bind 函數(shù)：
PS：如果我們使用上邊的方法改變箭頭函數(shù)的 this 指針，會(huì)發(fā)生什么情況呢?能否對(duì)齊進(jìn)行改變呢?
由于箭頭函數(shù)沒有自己的this指針，通過 call() 或 apply() 方法調(diào)用一個(gè)函數(shù)時(shí)，只能傳遞參數(shù)(不能綁定this)，他們的第一個(gè)參數(shù)會(huì)被忽略。
分享題目：圖解：一篇徹底帶你搞懂JS中的this指向問題
網(wǎng)站URL：http://www.5511xx.com/article/dpjcesg.html
