arrow function 箭頭函數中的this

箭頭函數

箭頭函數是對正規函數的語法簡化，它沒有this、arguments等屬性，也不能當作構造函數使用，在使用中尤其要注意箭頭函數中的this，箭頭函數中沒有this，它的this，是綁定的父作用域上下文，詳細的箭頭函數用法請參考Arrow function expressions
箭頭函數主要用在，匿名函數的地方，比如

let arr = ["hi","it's ok","i'm tracy mcgrady"];
arr.map(function(ele){
	return ele.length;
})
//[ 2, 7, 17 ]

//去掉function，使用箭頭函數
arr.map((ele)=>{
	return ele.length;
})

//只有一個參數，繼續簡化，去掉參數的括號
arr.map(ele=>{
	return ele.length;
})

箭頭函數中的this

var obj = {
	f:()=>{console.log(this.a)}
}
this.a = "hi";
obj.f()  //輸出hi

例中f是箭頭函數，箭頭函數沒有this，它的this是綁定了父作用域（全局作用域），父作用域的a=“hi”，所以輸出hi。
通過babel轉義一下，更能看出箭頭函數的本質

var _this = void 0;

var obj = {
  f: function f() {
    console.log(_this.a);
  }
};
(void 0).a = "hi";
obj.f(); //輸出hi

能很直觀的看出箭頭函數的this綁定的事父作用域。如果理解中的this，那麼也就懂了爲什麼Vue中的methods、mounted、computed、watch都不允許用箭頭函數。

普通函數中的this

再來看一下普通函數中的this

var obj2 = {
	f2:function(){
		console.log(this.a)
	}
}
this.a = "hi";
obj2.f2() //輸出undefined

普通函數中的this，取決於調用者，例中函數作爲對象的方法被調用，所以this就是obj2，而obj2沒有a，所以輸出undefined。