探索ES2015：箭頭函數（Arrow Functions）

前言

在JavaScript的世界中函數被譽爲一等公民，每當咱們須要在JS定義一個新的函數，咱們都會堅決果斷的function() {}，也許咱們能夠開始換一種方式來定義一個函數，也就是本文的主角箭頭函數，一個來自ECMAScript 2015（又稱ES6）的全新特性。

語法

var func = p => p

上面的代碼等價於

var func = function(p) {
  return p
}

看出差別了麼？最明顯的，咱們再也不須要寫function這個關鍵字，只要使用=>箭頭便可定義一個函數。咱們在定義函數的時候根據根據需求的不一樣，箭頭函數也有一些細微的差別，咱們來列舉一下：

若是箭頭函數不須要參數或須要多個參數，就使用一個圓括號表明參數部分。

// 無參函數
var func1 = () => 1

// 多參（大於1）函數
var func2 = (a, b) => a + b

若是箭頭函數的代碼塊部分多於一條語句，就要使用大括號將它們括起來，而且使用return語句返回。

// 不須要顯示return
var func = p => p

// 須要大括號而且顯示return
var func p => {
  var a = p + 1

  return a
}

特性

箭頭函數除了讓咱們少寫幾個字母外難道沒有更牛逼的特性？必須不是！下面咱們來介紹一個牛逼閃閃的特性：父做用域共享關鍵字this。

JavaScript中的this作爲一個古老的特性，有一個很是坑爹的特性this永遠指向的是當前函數的上下文

document.addEventListener('click', function() {
  setTimeout(function() {
    console.log(this) // ?
  })
}, false)

在運行上面代碼時，this指向的是什麼呢？答案是window，緣由是setTimeout是window對象下的一個方法。可是咱們此時但願的是獲取到document，怎麼解決呢，傳統的辦法是添加一個變量self保持對this的引用。

document.addEventListener('click', function() {
  var self = this;

  setTimeout(function() {
    console.log(self) // self => document
  })
}, false)

可是這種方法顯示不夠優雅，這個時候咱們就能夠利用箭頭函數來解決它，由於它不產生屬於它本身的this。

document.addEventListener('click', function() {
  var self = this;

  setTimeout(() => {
    console.log(this) // this => document
  })
}, false)

注意

箭頭函數有幾個使用注意點：

• 不可使用arguments對象，該對象在函數體內不存在。若是要用，能夠用解構參數代替。

• 不能夠看成構造函數，也就是說，不可使用new命令，不然會拋出一個錯誤。

• 不可使用yield命令，所以箭頭函數不能用做Generator函數。

總結

箭頭函數應該是咱們在ES6中使用最多的，也是我最喜歡的特性之一，箭頭函數使得表達更加簡潔。當第一眼看到它的寫法時，就被它的優雅所吸引，建議你們多多嚐嚐ES6的各類新特性。

參考

MDN
ECMAScript 6 入門