摘要：在現代中最讓人期待的特性就是關于箭頭函數，用來標識。比如，受歡迎的庫會強制使用箭頭函數創建匿名函數。然而，箭頭函數有優點，也有一些缺點。下面就從為何用怎么用何時用，這個三部分做一些總結。因此，箭頭函數不能用作生成器。

在現代JS中最讓人期待的特性就是關于箭頭函數，用=>來標識。箭頭函數有兩個主要的優點:

更簡短的函數；

更直觀的作用域和this的綁定(不綁定this)

因為這些優點，箭頭函數比起其他形式的函數聲明更受歡迎。比如，受歡迎的airbnb eslint configuration庫會強制使用JavaScript箭頭函數創建匿名函數。
然而，箭頭函數有優點，也有一些“缺點”。這就需要在使用的時候做一些權衡。下面就從為何用、怎么用、何時用，這個三部分做一些總結。

引入箭頭函數有兩個方面的作用：更簡短的函數并且不綁定this

var elements = ["h1", "div", "span", "section"];

elements.map(function(el) {
  return el.length; // 返回數組: [2, 3, 4, 7]
});

// 從上面的普通函數可以改寫為如下的箭頭函數
elements.map((el) => {
  return el.length; // [2, 3, 4, 7]
});

// 當箭頭函數只有一個參數時，可以省略參數的圓括號
elements.map(el => {
  return el.length; // [2, 3, 4, 7]
});

// 當箭頭函數體只有一個`return`語句時，可以省略`return`關鍵字和方法體的花括號
elements.map(el => el.length); // [2, 3, 4, 7]

// 在這個例子中，因為我們只需要`length`屬性，所以可以使用參數結構
// 需要注意的是字符串`"length"`是我們想要獲得的屬性名稱，而`elLength`則只是個變量名，可以替換成任意合法的變量名
elements.map(({ "length": elLength }) => elLength); // [2, 3, 4, 7]

在箭頭函數出現之前，每個新定義的函數都有它自己的this值(在構造函數的情況下是一個新對象，在嚴格模式的函數調用中則為undefined，如果該函數被作為"對象方法"調用則為基礎對象等)。
而箭頭函數并沒有它自己的執行上下，實際上，這就意味著代碼中的this和arguments都是繼承它的父函數。

const obj = {
  name: "test object",
  createAnonFunction: function() {
    return function() { 
      console.log(this.name);
      return this;
    }
  },
  createArrowFunction: function() {
    return () => {
      console.log(this.name);
      return this;
    }
  }
}

const anon = obj.createAnonFunction();
anon(); // undefined
anon() === window // true
  
const arrow = obj.createArrowFunction();
arrow(); // "test object"
arrow() === obj // true

第一個匿名參數有自己的上下文(指向的并非obj對象)，當被賦值給anon變量且調用時，this發生了改變，指向了window。另一個，箭頭函數與創建它的函數有相同的上下文，故指向obj對象。

由于箭頭函數沒有自己的this指針，通過call()或者apply()方法調用一個函數時，只能傳遞參數(不能綁定this)，它們的第一個參數會被忽略。

var adder = {
  base: 1,
  add: function(a) {
    var f = v => v + this.base;
    return f(a);
  },
  addByCall: function(a) {
    var f = v => v + this.base;
    var b = {
      base: 2
    };
    return f.call(b, a)
  }
}

adder.add(1); // 2
adder.addByCall(1); // 2

箭頭函數不綁定Arguments對象。因此，在本示例中，arguments只是引用了封閉作用域內的arguments:

function foo(n) {
  var f = () => arguments[0] + n; // 隱式綁定 foo 函數的arguments對象，arguments[0]是 n
  return f(); 
}

foo(1); // 2

在大多數情況下，使用剩余參數是相對使用arguments對象的更好選擇。

function foo(arg) {
  var f = (...agrs) => args[0];
  return f(arg);
}
foo(1); // 1

function foo(arg1, arg2) {
  var f = (...args) => args[1];
  return f(arg1, arg2);
}
foo(1, 2); // 2

比如你有一個有值的數組，你想去map遍歷每一項，這時箭頭函數就非常推薦:

const words = ["hello", "WORLD", "Whatever"];
const downcasedWords = words.map(word => word.toLowerCase());

一個及其常見的例子就是返回一個對象的某個值:

const names = objects.map(object => object.name);

類似的，當用forEach來替換傳統for循環的時候，實際上箭頭函數會直觀的保持this來自于父一級:

this.examples.forEach(example => {
  this.runExample(example);
});

當在編寫異步編程時，箭頭函數也會讓代碼更加直觀和簡潔。
這是箭頭函數的理想位置，特別是如果您生成的函數是有狀態的，同時想引用對象中的某些內容。

this.doSomethingAsync().then((result) => {
  this.storeResult(result);
});

箭頭函數的另一個常見而且十分有用的地方就是用于封裝的對象轉換。
例如在Vue.js中，有一種通用模式，就是使用mapState將Vuex存儲的各個部分，直接包含到Vue組件中。
這涉及到定義一套mappers，用于從原對象到完整的轉換輸出，這在組件問題中實十分有必要的。這一系列簡單的轉換,使用箭頭函數是最合適不過的。比如：

export default {
  computed: {
    ...mapState([
      "results",
      "users"
    ])
  }
}

箭頭函數不能用作構造器，和new一起使用會拋出錯誤。

var Foo = () => {};
var foo = new Foo(); // TypeError: Foo is not a constructor

箭頭函數沒有prototype屬性。

var Foo = () => {};
console.log(Foo.prototype); // undefined

yield 關鍵字通常不能在箭頭函數中使用（除非是嵌套在允許使用的函數內）。因此，箭頭函數不能用作生成器。

如果你將函數定義為箭頭函數，并且在他們之間來回調用，當你調試bug的時候你將被代碼困惑，甚至得到如下的錯誤信息：

{anonymous}(){anonymous}(){anonymous}(){anonymous}(){anonymous}() //anonymous

記住用params => { object: literal }這種簡單的語法返回對象字面量是行不通的。

var func = () => { foo: 1 };
func(); // undefined

var func = () => { foo: function() {} };   
// SyntaxError: function statement requires a name

這是因為花括號{}里面的代碼被解析為一系列語句（即 foo 被認為是一個標簽，而非對象字面量的組成部分）。
所以，記得用圓括號把對象字面量包起來：

var func = () => ({foo: 1});

箭頭函數在參數和箭頭之間不能換行。

var func = ()
           => 1; 
// SyntaxError: expected expression, got "=>"

雖然箭頭函數中的箭頭不是運算符，但箭頭函數具有與常規函數不同的特殊運算符優先級解析規則。

let callback;

callback = callback || function() {}; // ok

callback = callback || () => {};      
// SyntaxError: invalid arrow-function arguments

callback = callback || (() => {});    // ok

var foo = a => a > 15 ? 15 : a;

foo(10); // 10
foo(16); // 15

// 標準的閉包函數
function Add() {
  var i = 0;
  return function() {
    return (++i);
  }
}

var add = Add();
add(); // 1
add(); // 2

// 箭頭函數體的閉包(i = 0是默認參數)
var Add = (i = 0) => { return (() => (++i)) };
var add = Add();
add(); // 1
add(); // 2

// 因為僅有一個返回，return及括號也可以省略
var Add = (i = 0) => () => (++i);

var fact = (x) => ( x == 0 ?  1 : x*fact(x-1) );
fact(5);       // 120

箭頭函數是JS語言中十分特別的屬性，并且使很多情形中代碼更加的變化莫測。盡管如此，就像其他的語言特性，他們有各自的優缺點。因此我們使用它應該僅僅是作為一種工具，而不是無腦的簡單的全部替換為箭頭函數。