頭函數(shù)（Arrow Function）是ES6新增的特性，在網(wǎng)上看了一篇個(gè)人博客的講解，寫(xiě)的例子里面居然還有聲明的變量沒(méi)有被使用，卻還在招攬學(xué)生做IT培訓(xùn)，真的誤人子弟。

一個(gè)簡(jiǎn)單的例子

為了說(shuō)明箭頭函數(shù)，我們先寫(xiě)個(gè)簡(jiǎn)單的代碼：

const domain_list=[
  'www.abot.cn',
  'www.tseo.cn',
  'www.weiduke.com',
  'yanyubao.tseo.cn'
];

console.log(domain_list.map(domain_item=> domain_item.length));
// expected output: Array [11, 11, 15, 16]

關(guān)于JavaScript中map函數(shù)的使用，這里不贅述，不懂的抓緊惡補(bǔ)。

重點(diǎn)看第8行。

domain_item=> domain_item.length

等價(jià)于以下寫(xiě)法：

function(domain_item) {return domain_item.length}

所以以上代碼的ES5的寫(xiě)法為：

const domain_list=[
  'www.abot.cn',
  'www.tseo.cn',
  'www.weiduke.com',
  'yanyubao.tseo.cn'
];

console.log(domain_list.map(function(domain_item) {
	return domain_item.length;
}));
// expected output: Array [11, 11, 15, 16]

箭頭函數(shù)基本語(yǔ)法

總結(jié)總結(jié)一下，ES6的基本語(yǔ)法

(param1, param2, …, paramN)=> { statements }

(param1, param2, …, paramN)=> expression

//相當(dāng)于：(param1, param2, …, paramN)=>{ return expression; }

// 當(dāng)只有一個(gè)參數(shù)時(shí)，圓括號(hào)是可選的：

(singleParam)=> { statements }

singleParam=> { statements }

// 沒(méi)有參數(shù)的函數(shù)應(yīng)該寫(xiě)成一對(duì)圓括號(hào)。

()=> { statements }

對(duì)照以上的例子，什么是箭頭函數(shù)應(yīng)該一目了然了。

箭頭函數(shù)沒(méi)有單獨(dú)的this值

this一般是這樣被定義的：

• 如果是該函數(shù)是一個(gè)對(duì)象的方法，則它的this指針指向這個(gè)對(duì)象
• 在嚴(yán)格模式下的函數(shù)調(diào)用下，this指向undefined
• 如果是該函數(shù)是一個(gè)構(gòu)造函數(shù)，this指針指向一個(gè)新的對(duì)象

this的弊端

function Person() {
  // Person() 構(gòu)造函數(shù)定義 `this`作為它自己的實(shí)例.
  this.age=0;

  setInterval(function growUp() {
    // 在非嚴(yán)格模式, growUp()函數(shù)定義 `this`作為全局對(duì)象,
    // 與在 Person()構(gòu)造函數(shù)中定義的 `this`并不相同.
    this.age++;
  }, 1000);
}

var p=new Person();

在ECMAScript 3/5中，通過(guò)將this值分配給封閉的變量，可以解決this問(wèn)題。

function Person() {
  var that=this;
  that.age=0;

  setInterval(function growUp() {
    // 回調(diào)引用的是`that`變量, 其值是預(yù)期的對(duì)象.
    that.age++;
  }, 1000);
} 

或者，可以創(chuàng)建綁定函數(shù)，以便將預(yù)先分配的this值傳遞到綁定的目標(biāo)函數(shù)（上述示例中的growUp()函數(shù)）。

箭頭函數(shù)的解決方案

箭頭函數(shù)不會(huì)創(chuàng)建自己的this,它只會(huì)從自己的作用域鏈的上一層繼承this。因此，在下面的代碼中，傳遞給setInterval的函數(shù)內(nèi)的this與封閉函數(shù)中的this值相同：

function Person(){
  this.age=0;

  setInterval(()=> {
    this.age++; // |this| 正確地指向 p 實(shí)例
  }, 1000);
}

var p=new Person();

如果不理解以上代碼，那么再?gòu)?qiáng)調(diào)一遍：因?yàn)榧^函數(shù)沒(méi)有this，所以setInterval函數(shù)中的箭頭函數(shù)的this，只能是他的上一級(jí)函數(shù)的this。如果說(shuō)到這樣還不理解，建議惡補(bǔ)語(yǔ)文。

高級(jí)語(yǔ)法和進(jìn)階

箭頭函數(shù)的進(jìn)階知識(shí)，包括：

• 1、高級(jí)語(yǔ)言規(guī)則
• 2、嚴(yán)格模式下的使用
• 3、call和apply的調(diào)用

感興趣的小伙伴可以自個(gè)去研究。

我們深入研究一下箭頭函數(shù)。

箭頭函數(shù)不僅僅是編寫(xiě)簡(jiǎn)潔代碼的“捷徑”。它還具有非常特殊且有用的特性。

JavaScript 充滿了我們需要編寫(xiě)在其他地方執(zhí)行的小函數(shù)的情況。

例如：

• arr.forEach(func) —— forEach 對(duì)每個(gè)數(shù)組元素都執(zhí)行 func。
• setTimeout(func) —— func 由內(nèi)建調(diào)度器執(zhí)行。
• ……還有更多。

JavaScript 的精髓在于創(chuàng)建一個(gè)函數(shù)并將其傳遞到某個(gè)地方。

在這樣的函數(shù)中，我們通常不想離開(kāi)當(dāng)前上下文。這就是箭頭函數(shù)的主戰(zhàn)場(chǎng)啦。

一、箭頭函數(shù)沒(méi)有 “this”

正如我們?cè)?對(duì)象方法，"this" 一章中所學(xué)到的，箭頭函數(shù)沒(méi)有 this。如果訪問(wèn) this，則會(huì)從外部獲取。

例如，我們可以使用它在對(duì)象方法內(nèi)部進(jìn)行迭代：

let group={
  title: "Our Group",
  students: ["John", "Pete", "Alice"],

  showList() {
    this.students.forEach(
      student=> alert(this.title + ': ' + student)
    );
  }
};

group.showList();

這里 forEach 中使用了箭頭函數(shù)，所以其中的 this.title 其實(shí)和外部方法 showList 的完全一樣。那就是：group.title。

如果我們使用正常的函數(shù)，則會(huì)出現(xiàn)錯(cuò)誤：

let group={
  title: "Our Group",
  students: ["John", "Pete", "Alice"],

  showList() {
    this.students.forEach(function(student) {
      // Error: Cannot read property 'title' of undefined
      alert(this.title + ': ' + student)
    });
  }
};

group.showList();

報(bào)錯(cuò)是因?yàn)?forEach 運(yùn)行它里面的這個(gè)函數(shù)，但是這個(gè)函數(shù)的 this 為默認(rèn)值 this=undefined，因此就出現(xiàn)了嘗試訪問(wèn) undefined.title 的情況。

但箭頭函數(shù)就沒(méi)事，因?yàn)樗鼈儧](méi)有 this。

不能對(duì)箭頭函數(shù)進(jìn)行 new 操作

不具有 this 自然也就意味著另一個(gè)限制：箭頭函數(shù)不能用作構(gòu)造器（constructor）。不能用 new 調(diào)用它們。

箭頭函數(shù) VS bind

箭頭函數(shù) => 和使用 .bind(this) 調(diào)用的常規(guī)函數(shù)之間有細(xì)微的差別：

• .bind(this) 創(chuàng)建了一個(gè)該函數(shù)的“綁定版本”。
• 箭頭函數(shù) => 沒(méi)有創(chuàng)建任何綁定。箭頭函數(shù)只是沒(méi)有 this。this 的查找與常規(guī)變量的搜索方式完全相同：在外部詞法環(huán)境中查找。

二、箭頭函數(shù)沒(méi)有 “arguments”

箭頭函數(shù)也沒(méi)有 arguments 變量。

當(dāng)我們需要使用當(dāng)前的 this 和 arguments 轉(zhuǎn)發(fā)一個(gè)調(diào)用時(shí)，這對(duì)裝飾器（decorators）來(lái)說(shuō)非常有用。

例如，defer(f, ms) 獲得了一個(gè)函數(shù)，并返回一個(gè)包裝器，該包裝器將調(diào)用延遲 ms 毫秒：

function defer(f, ms) {
  return function() {
    setTimeout(()=> f.apply(this, arguments), ms)
  };
}

function sayHi(who) {
  alert('Hello, ' + who);
}

let sayHiDeferred=defer(sayHi, 2000);
sayHiDeferred("John"); // 2 秒后顯示：Hello, John

不用箭頭函數(shù)的話，可以這么寫(xiě)：

function defer(f, ms) {
  return function(...args) {
    let ctx=this;
    setTimeout(function() {
      return f.apply(ctx, args);
    }, ms);
  };
}

在這里，我們必須創(chuàng)建額外的變量 args 和 ctx，以便 setTimeout 內(nèi)部的函數(shù)可以獲取它們。

三、總結(jié)

箭頭函數(shù)：

• 沒(méi)有 this
• 沒(méi)有 arguments
• 不能使用 new 進(jìn)行調(diào)用
• 它們也沒(méi)有 super，但目前我們還沒(méi)有學(xué)到它。我們將在 類(lèi)繼承 一章中學(xué)習(xí)它。

這是因?yàn)椋^函數(shù)是針對(duì)那些沒(méi)有自己的“上下文”，但在當(dāng)前上下文中起作用的短代碼的。并且箭頭函數(shù)確實(shí)在這種使用場(chǎng)景中大放異彩。