摘要：在現(xiàn)代中最讓人期待的特性就是關(guān)于箭頭函數(shù)，用來標(biāo)識(shí)。比如，受歡迎的庫(kù)會(huì)強(qiáng)制使用箭頭函數(shù)創(chuàng)建匿名函數(shù)。然而，箭頭函數(shù)有優(yōu)點(diǎn)，也有一些缺點(diǎn)。下面就從為何用怎么用何時(shí)用，這個(gè)三部分做一些總結(jié)。因此，箭頭函數(shù)不能用作生成器。

在現(xiàn)代JS中最讓人期待的特性就是關(guān)于箭頭函數(shù)，用=>來標(biāo)識(shí)。箭頭函數(shù)有兩個(gè)主要的優(yōu)點(diǎn):

更簡(jiǎn)短的函數(shù)；

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

因?yàn)檫@些優(yōu)點(diǎn)，箭頭函數(shù)比起其他形式的函數(shù)聲明更受歡迎。比如，受歡迎的airbnb eslint configuration庫(kù)會(huì)強(qiáng)制使用JavaScript箭頭函數(shù)創(chuàng)建匿名函數(shù)。
然而，箭頭函數(shù)有優(yōu)點(diǎn)，也有一些“缺點(diǎn)”。這就需要在使用的時(shí)候做一些權(quán)衡。下面就從為何用、怎么用、何時(shí)用，這個(gè)三部分做一些總結(jié)。

引入箭頭函數(shù)有兩個(gè)方面的作用：更簡(jiǎn)短的函數(shù)并且不綁定this

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

elements.map(function(el) {
  return el.length; // 返回?cái)?shù)組: [2, 3, 4, 7]
});

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

// 當(dāng)箭頭函數(shù)只有一個(gè)參數(shù)時(shí)，可以省略參數(shù)的圓括號(hào)
elements.map(el => {
  return el.length; // [2, 3, 4, 7]
});

// 當(dāng)箭頭函數(shù)體只有一個(gè)`return`語句時(shí)，可以省略`return`關(guān)鍵字和方法體的花括號(hào)
elements.map(el => el.length); // [2, 3, 4, 7]

// 在這個(gè)例子中，因?yàn)槲覀冎恍枰猔length`屬性，所以可以使用參數(shù)結(jié)構(gòu)
// 需要注意的是字符串`"length"`是我們想要獲得的屬性名稱，而`elLength`則只是個(gè)變量名，可以替換成任意合法的變量名
elements.map(({ "length": elLength }) => elLength); // [2, 3, 4, 7]

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

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

第一個(gè)匿名參數(shù)有自己的上下文(指向的并非obj對(duì)象)，當(dāng)被賦值給anon變量且調(diào)用時(shí)，this發(fā)生了改變，指向了window。另一個(gè)，箭頭函數(shù)與創(chuàng)建它的函數(shù)有相同的上下文，故指向obj對(duì)象。

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

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

箭頭函數(shù)不綁定Arguments對(duì)象。因此，在本示例中，arguments只是引用了封閉作用域內(nèi)的arguments:

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

foo(1); // 2

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

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

比如你有一個(gè)有值的數(shù)組，你想去map遍歷每一項(xiàng)，這時(shí)箭頭函數(shù)就非常推薦:

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

一個(gè)及其常見的例子就是返回一個(gè)對(duì)象的某個(gè)值:

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

類似的，當(dāng)用forEach來替換傳統(tǒng)for循環(huán)的時(shí)候，實(shí)際上箭頭函數(shù)會(huì)直觀的保持this來自于父一級(jí):

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

當(dāng)在編寫異步編程時(shí)，箭頭函數(shù)也會(huì)讓代碼更加直觀和簡(jiǎn)潔。
這是箭頭函數(shù)的理想位置，特別是如果您生成的函數(shù)是有狀態(tài)的，同時(shí)想引用對(duì)象中的某些內(nèi)容。

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

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

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

箭頭函數(shù)不能用作構(gòu)造器，和new一起使用會(huì)拋出錯(cuò)誤。

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

箭頭函數(shù)沒有prototype屬性。

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

yield 關(guān)鍵字通常不能在箭頭函數(shù)中使用（除非是嵌套在允許使用的函數(shù)內(nèi)）。因此，箭頭函數(shù)不能用作生成器。

如果你將函數(shù)定義為箭頭函數(shù)，并且在他們之間來回調(diào)用，當(dāng)你調(diào)試bug的時(shí)候你將被代碼困惑，甚至得到如下的錯(cuò)誤信息：

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

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

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

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

這是因?yàn)榛ɡㄌ?hào){}里面的代碼被解析為一系列語句（即 foo 被認(rèn)為是一個(gè)標(biāo)簽，而非對(duì)象字面量的組成部分）。
所以，記得用圓括號(hào)把對(duì)象字面量包起來：

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

箭頭函數(shù)在參數(shù)和箭頭之間不能換行。

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

雖然箭頭函數(shù)中的箭頭不是運(yùn)算符，但箭頭函數(shù)具有與常規(guī)函數(shù)不同的特殊運(yùn)算符優(yōu)先級(jí)解析規(guī)則。

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

// 標(biāo)準(zhǔn)的閉包函數(shù)
function Add() {
  var i = 0;
  return function() {
    return (++i);
  }
}

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

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

// 因?yàn)閮H有一個(gè)返回，return及括號(hào)也可以省略
var Add = (i = 0) => () => (++i);

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

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