ES6中新增了箭頭函式這種語法,箭頭函式以其簡潔性和方便獲取this的特性,接下來通過本文給大家分享ES6箭頭函式中的this，寫的十分的全面細緻，具有一定的參考價值，對此有需要的朋友可以參考學習下。如有不足之處，歡迎批評指正。

簡要介紹：箭頭函式中的this，指向與一般function定義的函式不同，箭頭函式this的定義：箭頭函式中的this是在定義函式的時候繫結，而不是在執行函式的時候繫結。
（1）一般函式this指向在執行是繫結 當執行obj.say()時候，this指向的是obj這個物件。

var x=11;
var obj={
 x:22,
 say:function(){
 console.log(this.x)
 }
}
obj.say();
//console.log輸出的是22
 

（2）所謂的定義時候繫結，就是this是繼承自父執行上下文！！中的this，比如這裡的箭頭函式中的this.x，箭頭函式本身與say平級以key:value的形式，也就是箭頭函式本身所在的物件為obj，而obj的父執行上下文就是window，因此這裡的this.x實際上表示的是window.x，因此輸出的是11。

var x=11;
var obj={
 x:22,
 say:()=>{
 console.log(this.x);
 }
}
obj.say();
//輸出的值為11

類似的還有：
（3）

var a=11
function test1(){
 this.a=22;
 let b=function(){
 console.log(this.a);
 };
 b();
}
var x=new test1();
//歡迎加入前端全棧開發交流圈一起吹水聊天學習交流：864305860
 

輸出11
箭頭函式情況：

var a=11;
function test2(){
 this.a=22;
 let b=()=>{console.log(this.a)}
 b();
}
var x=new test2();
//輸出22
//歡迎加入前端全棧開發交流圈一起吹水聊天學習交流：864305860

很奇怪對不對，我是這樣理解的，ES6中定義的時候繫結this的具體含義，應該繼承的是父執行上下文裡面的this，切忌是父執行上下文！！！這樣就很多箭頭函式中的指向不明確就迎刃而解了。
注意：簡單物件（非函式）是沒有執行上下文的！

深入理解箭頭函式中的this

箭頭函式中，this指向的固定化，並不是因為箭頭函式內部有繫結this的機制，實際原因是箭頭函式根本沒有自己的this，導致內部的this就是外層程式碼塊的this。正是因為它沒有this，所以也就不能用作建構函式。
我們可以來模擬ES5中的箭頭函式轉化：

// ES6
function foo() {
 setTimeout(() => {
 console.log('id:', this.id);
 }, 100);
}
// ES5
function foo() {
 var _this = this;
 
 setTimeout(function () {
 console.log('id:', _this.id);
 }, 100);
}
//歡迎加入前端全棧開發交流圈一起吹水聊天學習交流：864305860

所以在定義物件的時候，定義物件屬性，裡面的this指向的一般是全域性，或者這個物件所在的那個環境中的this。

結語

感謝您的觀看，如有不足之處，歡迎批評指正。

本次給大家推薦一個免費的學習群，裡面概括移動應用網站開發，css，html，webpack，vue node angular以及面試資源等。
對web開發技術感興趣的同學，歡迎加入Q群：864305860，不管你是小白還是大牛我都歡迎，還有大牛整理的一套高效率學習路線和教程與您免費分享，同時每天更新視訊資料。
最後，祝大家早日學有所成，拿到滿意offer，快速升職加薪，走上人生巔峰。