????????有2位童鞋在第十節(jié)留言說，關(guān)于箭頭函數(shù)的this的使用有必要介紹一下。

????????在這里，前端君對2位同學(xué)表示感謝，相信很多初學(xué)者也一樣會感謝你們的提醒。

????????那么，接下來我們就學(xué)習(xí)一下，究竟這個箭頭函數(shù)的this有什么不一樣的地方，讓大家這么重視？

????????用一句話概括：箭頭函數(shù)中的this指向的是定義時的this，而不是執(zhí)行時的this。

????????如果上面這句話聽的是懂非懂或者完全不懂的，沒關(guān)系，下面會有案例講解。

舉個栗子

????????來看看this的一個使用案例：

? ?//定義一個對象
? ?var obj = {
??? ? ? x:100, //屬性x
??? ? ? show(){
??????? //延遲500毫秒，輸出x的值
? ? ? ? ? ?setTimeout(
?????????? ? ? //匿名函數(shù)
? ? ? ? ? ? ? function(){console.log(this.x);},
?????????? ? ? 500
??????? ? ?);
??? ? ? }
? ?};
? ?obj.show();//打印結(jié)果：undefined

?

????????案例中，我們的obj對象中有一個屬性x和一個屬性show( )方法（用的是對象的簡潔表示法，第九節(jié)已講解，點擊查看），show( )通過this打印出x的值。可最后一句代碼執(zhí)行后，我們打印出的結(jié)果是undefined。這是為什么呢？難道x的值不是100嗎？

????????沒錯，x的值確實是100，但問題出在了this上，當(dāng)代碼執(zhí)行到了setTimeout( )的時候，此時的this已經(jīng)變成了window對象（setTimeout( )是window對象的方法），已經(jīng)不再是obj對象了，所以我們用this.x獲取的時候，獲取的不是obj.x的值，而是window.x的值，再加上window上沒有定義屬性x，所以得到的結(jié)果就是：undefined。

????????我們可以用一些ES5中的知識來巧妙地避過這個坑，但是，我們今天主要介紹的是ES6的箭頭函數(shù)。

箭頭函數(shù)閃亮登場

????????如果使用箭頭函數(shù)來編寫同樣的一段代碼，得到的this.x又是另一番景象。我們來試試看：

? ?//定義一個對象
? ?var obj = {
??? ? ? x:100,//屬性x
??? ? ? show(){
??????? ? ? //延遲500毫秒，輸出x的值
? ? ? ? ? ?setTimeout(
?????????? ? ? //不同處：箭頭函數(shù)
? ? ? ? ? ? ? () => { console.log(this.x)},
? ???????? ? ??500
??????? ? ? );
??? ? ? }
? ?};
? ?obj.show();//打印結(jié)果：100

?

????????同樣的一段代碼，唯一的不用就是setTimeout中，原本的匿名函數(shù)用箭頭函數(shù)代替了，你可以往上翻，對比著看兩段代碼的不同之處。此外，最大的不同的是打印結(jié)果，用箭頭函數(shù)編寫的這段代碼，成功地打印出了我們想要的結(jié)果：100。

????????為什么是這樣？正如文章第三段所概括：

箭頭函數(shù)中的this指向的是定義時的this，而不是執(zhí)行時的this

????????當(dāng)定義obj的show( )方法的時候，我們在箭頭函數(shù)編寫this.x，此時的this是指的obj，所以this.x指的是obj.x。而在show()被調(diào)用的時候，this依然指向的是被定義時候所指向的對象，也就是obj對象，故打印出：100。

?

????????以上就是箭頭函數(shù)中this的指向問題講解！如果看完有點繞的話，可以重看一遍，看慢一點，學(xué)得更快！

????????再次感謝 ?“斷線人偶”，“Better” ?2位童鞋的提醒，也希望更多童鞋像他們一樣參與互動，一起學(xué)習(xí)一起進(jìn)步，不管你處于哪個學(xué)習(xí)階段，這里都?xì)g迎。

?

補(bǔ)課小結(jié)

總結(jié) ：箭頭函數(shù)的this指向的是定義時的this對象，而不是執(zhí)行時的this對象。

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的第十节（补课）：函数的扩展 — 箭头函数的this使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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