前些天發(fā)現(xiàn)了一個(gè)巨牛的人工智能學(xué)習(xí)網(wǎng)站，通俗易懂，風(fēng)趣幽默，忍不住分享一下給大家。點(diǎn)擊跳轉(zhuǎn)到教程。

this的指向已經(jīng)是一個(gè)老生常談的問(wèn)題，每逢面試都要去復(fù)習(xí)復(fù)習(xí)，近來(lái)鞏固js的基礎(chǔ)，決心徹底掌握這個(gè)知識(shí)點(diǎn)，一勞永逸。說(shuō)明一下，為了不影響大家的思考過(guò)程，下面的代碼都不會(huì)去注釋答案，想知道答案，只需要去控制臺(tái)執(zhí)行一下。

四類場(chǎng)景逐一擊破

首先，分析this的指向共有四種類型，在分析之前，我們首先帶好兩個(gè)錦囊：
1.函數(shù)被調(diào)用時(shí)（即運(yùn)行時(shí)）才會(huì)確定該函數(shù)內(nèi)this的指向。因?yàn)樵诤瘮?shù)中this與arguments是兩個(gè)特殊的變量，在函數(shù)被調(diào)用時(shí)才會(huì)取得它們，而且搜索這兩個(gè)變量時(shí)只會(huì)在活動(dòng)對(duì)象范圍里面去搜。（有關(guān)活動(dòng)對(duì)象與變量對(duì)象的知識(shí)，請(qǐng)移步到j(luò)s 中的活動(dòng)對(duì)象 與 變量對(duì)象 什么區(qū)別？）
2.要確定函數(shù)中this的指向，必須先找到該函數(shù)被調(diào)用的位置。

認(rèn)準(zhǔn)第一種“test()”形式

var a = 1 function test () {console.log(this.a) } test()

直接不帶任何引用形式去調(diào)用函數(shù)，則this會(huì)指向全局對(duì)象，因?yàn)闆](méi)有其他影響去改變this，this默認(rèn)就是指向全局對(duì)象（瀏覽器是window，Node中是global）的。這個(gè)結(jié)論是在非嚴(yán)格模式的情況下，嚴(yán)格模式下這個(gè)this其實(shí)是undefined的。

認(rèn)準(zhǔn)第二種“xxx.test()”形式

var a = 1 function test () {console.log(this.a) } var obj = {a: 2,test } obj.test()

這種形式對(duì)比起第一種，很明顯test()已經(jīng)是名花有主的了！看清楚，是誰(shuí)呼喚的test()？沒(méi)錯(cuò)，就是obj，所以this的指向就不言而喻了。一句話，誰(shuí)去調(diào)用這個(gè)函數(shù)的，這個(gè)函數(shù)中的this就綁定到誰(shuí)身上。

var a = 1 function test () {console.log(this.a) } var obj = {a: 2,test } var obj0 = {a: 3,obj } obj0.obj.test()

即使是這種串串燒的形式，結(jié)果也是一樣的，test()中的this只對(duì)直屬上司（直接調(diào)用者obj）負(fù)責(zé)。再來(lái)看一個(gè)綜合點(diǎn)的例子：

var a = 1 function test () {console.log(this.a) } var obj = {a: 2,test } var testCopy = obj.test testCopy()

嗯，聰明的你一定想到，換了個(gè)名字就能騙到我了！？雖然經(jīng)過(guò)了一波改名換姓，但本質(zhì)上還不是obj.test()嘛！結(jié)果一定和上面一樣！唔，請(qǐng)F(tuán)12在控制臺(tái)試試，竟然……其實(shí)這里并不需要去思考什么，按照我們的套路，我們就認(rèn)函數(shù)調(diào)時(shí)的樣子，有沒(méi)有看到最后調(diào)用的時(shí)候跟第一種情況一毛一樣？我再介紹一個(gè)場(chǎng)景大家一定不會(huì)覺(jué)得陌生：

var a = 1 function test () {console.log(this.a) } var obj = {a: 2,test } setTimeout(obj.test)

你可以意淫一下setTimeout的本質(zhì)，是不是相當(dāng)于有一個(gè)setTimeout函數(shù)，接收兩個(gè)參數(shù)：

function setTimeout (fn, time) {// 這里干了一大波不可描述的事情，最后會(huì)去調(diào)一下你傳進(jìn)來(lái)的回調(diào)函數(shù)fn() }

看到怎樣調(diào)用你傳進(jìn)來(lái)的函數(shù)了嗎！？再想想我們第一種形式的標(biāo)題認(rèn)準(zhǔn)第一種“test()”形式。

認(rèn)準(zhǔn)第三種“test.call(xxx) / test.apply(xxx) / test.bind()”形式

看了上面兩種形式之后，你可能會(huì)想，我非常討厭上面那些矯情的扭扭捏捏的九曲十八彎的調(diào)用方式，讓人毫無(wú)安全感，我要我自己指定this的指向，我要?jiǎng)偬彀胱?#xff01;沒(méi)問(wèn)題，我的代碼我做主：

var a = 1 function test () {console.log(this.a) } var obj = {a: 2,test } var testCopy = obj.test testCopy.call(obj)

可以看到，我們通過(guò)call（apply跟call的區(qū)別只是傳參，作用是一樣的，bind有點(diǎn)區(qū)別，bind能讓我們的函數(shù)延遲執(zhí)行，apply與call調(diào)用就執(zhí)行，所以bind這樣的形式我們也稱為函數(shù)柯里化，這些就不是我們這里要說(shuō)的啦）來(lái)調(diào)用testCopy，并且傳入了你想要this指向的上下文，那么this就會(huì)乖乖按照你的指示行事啦?？吹竭@里，我們也可以想象第一、二種形式其實(shí)可以轉(zhuǎn)化成call/apply的形式，有一篇比較棒的文章描述了這樣的思考過(guò)程，大家也可以看看this 的值到底是什么？一次說(shuō)清楚

認(rèn)準(zhǔn)第四種“new test()”形式

終于到了最后一種形式了，這種形式比較好認(rèn)，因?yàn)橛袠?biāo)志性的new：

var a = 1 function test (a) {this.a = a } var b = new test(2) console.log(b.a)

new這個(gè)操作符其實(shí)是new了一個(gè)新對(duì)象出來(lái)，而被new的test我們稱為構(gòu)造函數(shù)，我們可以在這個(gè)構(gòu)造函數(shù)里定義一下將要到來(lái)的新對(duì)象的一些屬性。那么在構(gòu)造函數(shù)里，我們?cè)鯓尤ッ枋鲞@個(gè)還未出生的新對(duì)象呢？沒(méi)錯(cuò)，就是用this。所以構(gòu)造函數(shù)里的this指的就是將要被new出來(lái)的新對(duì)象。

One more thing

感謝大家看到這里，但還要說(shuō)最后一種形式。等等，不是說(shuō)好的只有四種形式嗎！稍安勿躁，正常套路下確實(shí)只有上面四種，但是有個(gè)東西別忘了，就是大家最喜歡的箭頭函數(shù)。

var a = 1 var test = () => {console.log(this.a) } var obj = {a: 2,test } obj.test()

來(lái)，往上翻一下我們的第一個(gè)錦囊，“函數(shù)被調(diào)用時(shí)（即運(yùn)行時(shí)）才會(huì)確定該函數(shù)內(nèi)this的指向?！爆F(xiàn)在函數(shù)這兩個(gè)字要加個(gè)詞修飾一下，變成普通函數(shù)（非箭頭函數(shù)）才能區(qū)別于箭頭函數(shù)。箭頭函數(shù)中的this在函數(shù)定義的時(shí)候就已經(jīng)確定，它this指向的是它的外層作用域this的指向。

最后

我們最后還要說(shuō)：“到此為止，真的沒(méi)有了。”
希望看完這篇文章之后，再有人問(wèn)this指向的問(wèn)題，你可以嘴角微微上揚(yáng)，冷笑一聲：“不要再問(wèn)我this的指向問(wèn)題了?！?br /> 揚(yáng)長(zhǎng)而去。

轉(zhuǎn)自：https://segmentfault.com/a/1190000015438195

總結(jié)

以上是生活随笔為你收集整理的this 的指向问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。