之前寫過一篇Larry：Javascript ：this關鍵字 詳解，其實只是解釋了普通函式的this用法，今天再給大家補充一下箭頭函式的this詳解。

箭頭函式相信大家在日常開發中用到的地方非常之多，因為它很簡潔，可讀性強，但是它最大的好處，其實是解決了匿名函式的this指向問題，有利於封裝回調函式。

先來個總結：

箭頭函式體內的this物件，就是定義該函式時所在的作用域指向的物件，而不是使用時所在的作用域指向的物件。

下面是普通函式的列子：

var name = 'window'; // 其實是window.name = 'window'

var A = {
   name: 'A',
   sayHello: function(){
      console.log(this.name)
   }
}

A.sayHello();// 輸出A

var B = {
  name: 'B'
}

A.sayHello.call(B);//輸出B

A.sayHello.call();//不傳引數指向全域性window物件，輸出window.name也就是window
 

從上面可以看到，sayHello這個方法是定義在A物件中的，噹噹我們使用call方法，把其指向B物件，最後輸出了B；可以得出，sayHello的this只跟使用時的物件有關。

改造一下：

var name = 'window'; 

var A = {
   name: 'A',
   sayHello: () => {
      console.log(this.name)
   }
}

A.sayHello();// 還是以為輸出A ? 錯啦，其實輸出的是window

我相信在這裡，大部分同學都會出錯，以為sayHello是繫結在A上的，但其實它繫結在window上的，那到底是為什麼呢？

一開始，我重點標註了“該函式所在的作用域指向的物件”，作用域是指函式內部，這裡的箭頭函式，也就是sayHello，所在的作用域其實是最外層的js環境，因為沒有其他函式包裹；然後最外層的js環境指向的物件是winodw物件，所以這裡的this指向的是window物件。

那如何改造成永遠繫結A呢：

var name = 'window'; 

var A = {
   name: 'A',
   sayHello: function(){
      var s = () => console.log(this.name)
      return s//返回箭頭函式s
   }
}

var sayHello = A.sayHello();
sayHello();// 輸出A 

var B = {
   name: 'B';
}

sayHello.call(B); //還是A
sayHello.call(); //還是A
 

OK，這樣就做到了永遠指向A物件了，我們再根據“該函式所在的作用域指向的物件”來分析一下：

1. 該函式所在的作用域：箭頭函式s 所在的作用域是sayHello,因為sayHello是一個函式。
2. 作用域指向的物件：A.sayHello指向的物件是A。

所以箭頭函式s 中this就是指向A啦 ～～

----------------finish-------------

最後是使用箭頭函式其他幾點需要注意的地方

1. 不可以當作建構函式，也就是說，不可以使用new命令，否則會丟擲一個錯誤。
2. 不可以使用arguments物件，該物件在函式體內不存在。如果要用，可以用 rest 引數代替。
3. 不可以使用yield命令，因此箭頭函式不能用作 Generator 函式。

逃～