深入理解ES6箭頭函數中的this

• 箭頭函數看上去是匿名函數的一種簡寫，但實際上，箭頭函數和匿名函數有個明顯的區別：
  • 箭頭函數內部的this是詞法作用域，由上下文確定。
  • 箭頭函數中的this是在定義函數的時候綁定，而不是在執行函數的時候綁定。
• 由於this在箭頭函數中已經按照詞法作用域綁定了，所以，用call()或者apply()、bind()調用箭頭函數時，無法對this進行綁定（無法使用call()或者apply()、bind()改變this的指向），即傳入的第一個參數被忽略。內部的this指向父執行上下文里面的this。
• 箭頭函數中，this指向的固定化，並不是因為箭頭函數內部有綁定this的機制，實際原因是箭頭函數根本沒有自己的this，導致內部的this就是外層代碼塊的this。正是因為它沒有this，所以也就不能用作構造函數。

• 箭頭函數中的this是在定義函數的時候綁定，看一個例子：

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

   

• 所謂的定義時候綁定，就是this是繼承自父執行上下文中的this，比如這里的箭頭函數中的this.x，箭頭函數本身與say平級以key:value的形式，也就是箭頭函數本身所在的對象為obj，而obj的父執行上下文就是window，因此這里的this.x實際上表示的是window.x，因此輸出的是11。

• 而對於下面的例子：

  var obj = { birth: 1990, getAge: function () { var b = this.birth; // 1990
          var fn = () => new Date().getFullYear() - this.birth; // this指向obj對象
          return fn(); } }; obj.getAge(); // 28

   

• 例子中箭頭函數本身是在getAge方法中定義的，因此，getAge方法的父執行上下文是obj，因此這里的this指向則為obj對象。