javaES6箭頭函式的全新特性

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

箭頭函式的產生，主要由兩個目的：更簡潔的語法和與父作用域共享關鍵字“this”。接下來，讓我們來看幾個詳細的例子。

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

< class="js">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); });
}

以下是使用新的箭頭函式語法進行重構後的程式碼：

< class="js">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”：

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

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

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

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

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

< class="js">const emptyObject = () => {};
emptyObject(); // ?

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

< class="js">const emptyObject = () => ({});
emptyObject(); // {}

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

< class="js">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() => ({}) // {}

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

< class="js">$('.current-time').each(function () {
  setInterval(function () {
    $(this).text(Date.now());
  }, 1000);
});

當嘗試在“setInterval”的回撥中使用“this”來引用DOM元素時，很不幸，我們得到的只是一個屬於回撥函式自身上下文的“this”。一個通常的解決辦法是定義一個“that”或者“self”變數：

< class="js">$('.current-time').each(function () {  var self = this;
 
  setInterval(function () {
    $(self).text(Date.now());
  }, 1000);
});

但當使用胖箭頭函式時，這個問題就不復存在了。因為它不產生屬於它自己上下文的“this”：

< class="js">$('.current-time').each(function () {
  setInterval(() => $(this).text(Date.now()), 1000);
});

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

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

再次重申，箭頭函式沒有屬於自己的“this”>和“arguments”。但是，你仍可以透過rest引數，來得到所有傳入的引數陣列：

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

箭頭函式不能作為“generator”函式使用。

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

• 當只有一條宣告（statement）語句時，隱式“return”。
• 需要使用到父作用域中的“this”。

原文來自：