JavaScript ES6箭頭函數指南

標籤：img   yield   fat   turn   text   接下來   技術分享   return   之一   

前言

胖箭頭函數（Fat arrow functions），又稱箭頭函數，是一個來自ECMAScript 2015（又稱ES6）的全新特性。有傳聞說，箭頭函數的文法=>，是受到了CoffeeScript 的影響，並且它與CoffeeScript中的=>文法一樣，共用this上下文。

箭頭函數的產生，主要由兩個目的：更簡潔的文法和與父範圍共用關鍵字this。接下來，讓我們來看幾個詳細的例子。

新的函數文法

傳統的JavaScript函數文法並沒有提供任何的靈活性，每一次你需要定義一個函數時，你都必須輸入function () {}。CoffeeScript如今之所以那麼火，有一個不可忽略的原因就是它有更簡潔的函數文法。更簡潔的函數文法在有大量回呼函數的情境下好處特別明顯，讓我們從一個Promise鏈的例子看起：

function getVerifiedToken(selector) {  return getUsers(selector)    .then(function (users) { return users[0]; })    .then(verifyUser)    .then(function (user, verifiedToken) { return verifiedToken; })    .catch(function (err) { log(err.stack); });}

以下是使用新的箭頭函數文法進行重構後的代碼：

function getVerifiedToken(selector) {  return getUsers(selector)    .then(users => users[0])    .then(verifyUser)    .then((user, verifiedToken) => verifiedToken)    .catch(err => log(err.stack));}

以下是值得注意的幾個要點：

• function和{}都消失了，所有的回呼函數都只出現在了一行裡。

• 當只有一個參數時，()也消失了（rest參數是一個例外，如(...args) => ...）。

• 當{}消失後，return關鍵字也跟著消失了。單行的箭頭函數會提供一個隱式的return（這樣的函數在其他程式設計語言中常被成為lamda函數）。

這裡再著重強調一下上述的最後一個要求。僅僅當箭頭函數為單行的形式時，才會出現隱式的return。當箭頭函數伴隨著{}被聲明，那麼即使它是單行的，它也不會有隱式return：

const getVerifiedToken = selector => {  return getUsers()    .then(users => users[0])    .then(verifyUser)    .then((user, verifiedToken) => verifiedToken)    .catch(err => log(err.stack));}

如果我們的函數內只有一條聲明（statement），我們可以不寫{}，這樣看上去會和CoffeeScript中的函數非常相似：

const getVerifiedToken = selector =>  getUsers()    .then(users => users[0])    .then(verifyUser)    .then((user, verifiedToken) => verifiedToken)    .catch(err => log(err.stack));

你沒有看錯，以上的例子是完全合法的ES6文法。當我們談論只包含一條聲明（statement）的箭頭函數時，這並不意味著這條聲明不能夠分成多行寫。

這裡有一個坑，當忽略了{}後，我們該怎麼返回Null 物件（{}）呢？

const emptyObject = () => {};emptyObject(); // ?

不幸的是，Null 物件{}和空白函數代碼塊{}長得一模一樣。。以上的例子中，emptyObject的{}會被解釋為一個空白函數代碼塊，所以emptyObject()會返回undefined。如果要在箭頭函數中明確地返回一個Null 物件，則你不得不將{}包含在一對圓括弧中(({}))：

const emptyObject = () => ({});emptyObject(); // {}

下面是一個更完整的例子：

function () { return 1; }() => { return 1; }() => 1 function (a) { return a * 2; }(a) => { return a * 2; }(a) => a * 2a => a * 2 function (a, b) { return a * b; }(a, b) => { return a * b; }(a, b) => a * b function () { return arguments[0]; }(...args) => args[0] () => {} // undefined() => ({}) // {}

this

JavaScript中this的故事已經是非常古老了，每一個函數都有自己的上下文。以下例子的目的是使用jQuery來展示一個每秒都會更新的時鐘：

$(‘.current-time‘).each(function () {  setInterval(function () {    $(this).text(Date.now());  }, 1000);});

當嘗試在setInterval的回調中使用this來引用DOM元素時，很不幸，我們得到的只是一個屬於回呼函數自身內容相關的this。一個通常的解決辦法是定義一個that或者self變數：

$(‘.current-time‘).each(function () {  var self = this;   setInterval(function () {    $(self).text(Date.now());  }, 1000);});

但當使用胖箭頭函數時，這個問題就不複存在了。因為它不產生屬於它自己內容相關的this：

$(‘.current-time‘).each(function () {  setInterval(() => $(this).text(Date.now()), 1000);});

arguments變數

箭頭函數與普通函數還有一個區別就是，它沒有自己的arguments變數：

function log(msg) {  const print = () => console.log(arguments[0]);  print(`LOG: ${msg}`);} log(‘hello‘); // hello

再次重申，箭頭函數沒有屬於自己的this和arguments。但是，你仍可以通過rest參數，來得到所有傳入的參數數組：

function log(msg) {  const print = (...args) => console.log(args[0]);  print(`LOG: ${msg}`);} log(‘hello‘); // LOG: hello

關於 yield

箭頭函數不能作為generator函數使用。

最後

箭頭函數是我最喜歡的ES6特性之一。使用=>來代替function是非常便捷的。但我也曾見過只使用=>來聲明函數的代碼，我並不認為這是好的做法，因為=>也提供了它區別於傳統function，其所專屬的特性。我個人推薦，僅在你需要使用它提供的新特性時，才使用它：

• 當只有一條聲明（statement）語句時，隱式return。

• 需要使用到父範圍中的this。

JavaScript ES6箭頭函數指南