轉自：微信公衆號—— web前端教程
有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對象。