????????有2位童鞋在第十節留言說，關于箭頭函數的this的使用有必要介紹一下。

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

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

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

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

舉個栗子

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

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

?

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

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

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

箭頭函數閃亮登場

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

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

?

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

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

箭頭函數中的this指向的是定義時的this，而不是執行時的this

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

?

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

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

?

補課小結

總結 ：箭頭函數的this指向的是定義時的this對象，而不是執行時的this對象。

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。