[譯]JavaScript ES6箭頭函數(shù)指南

makeFoxPlay 發(fā)布于2019-08-14 12:35 / 2412人閱讀

摘要：以下例子的目的是使用來展示一個每秒都會更新的時鐘當嘗試在的回調中使用來引用元素時，很不幸，我們得到的只是一個屬于回調函數(shù)自身上下文的。

前言

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

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

新的函數(shù)語法

傳統(tǒng)的JavaScript函數(shù)語法并沒有提供任何的靈活性，每一次你需要定義一個函數(shù)時，你都必須輸入function () {}。CoffeeScript如今之所以那么火，有一個不可忽略的原因就是它有更簡潔的函數(shù)語法。更簡潔的函數(shù)語法在有大量回調函數(shù)的場景下好處特別明顯，讓我們從一個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); });
}

以下是使用新的箭頭函數(shù)語法進行重構后的代碼：

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

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

function和{}都消失了，所有的回調函數(shù)都只出現(xiàn)在了一行里。

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

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

這里再著重強調一下上述的最后一個要求。僅僅當箭頭函數(shù)為單行的形式時，才會出現(xiàn)隱式的return。當箭頭函數(shù)伴隨著{}被聲明，那么即使它是單行的，它也不會有隱式return：

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

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

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

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

這里有一個坑，當忽略了{}后，我們該怎么返回空對象（{}）呢？

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

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

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

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

function () { return 1; }
() => { return 1; }
() => 1
 
function (a) { return a * 2; }
(a) => { return a * 2; }
(a) => a * 2
a => 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的故事已經是非常古老了，每一個函數(shù)都有自己的上下文。以下例子的目的是使用jQuery來展示一個每秒都會更新的時鐘：

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

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

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

但當使用胖箭頭函數(shù)時，這個問題就不復存在了。因為它不產生屬于它自己上下文的this：

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

arguments變量

箭頭函數(shù)與普通函數(shù)還有一個區(qū)別就是，它沒有自己的arguments變量：

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

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

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

關于yield

箭頭函數(shù)不能作為generator函數(shù)使用。

最后

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

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

需要使用到父作用域中的this。

原文鏈接

https://strongloop.com/strongblog/an-introduction-to-javascript-es6-arrow-functions/

云服務器 GPU云服務器箭頭云服務器安裝使用指南箭頭函數(shù) javascript指南 javascript教程指南

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/64576.html

深入理解JavaScript

摘要：深入之繼承的多種方式和優(yōu)缺點深入系列第十五篇，講解各種繼承方式和優(yōu)缺點。對于解釋型語言例如來說，通過詞法分析語法分析語法樹，就可以開始解釋執(zhí)行了。 JavaScript深入之繼承的多種方式和優(yōu)缺點 JavaScript深入系列第十五篇，講解JavaScript各種繼承方式和優(yōu)缺點。寫在前面本文講解JavaScript各種繼承方式和優(yōu)缺點。但是注意：這篇文章更像是筆記，哎，再讓我...

myeveryheart 2019-08-22 13:46 評論0 收藏0
[譯] 從 CoffeeScript 遷移到 ES6

摘要：語法校驗會給出警告當你仍在使用或不通過任何關鍵字聲明變量時。但是如果腳本中還有其他的普通導出，就會得到非常奇怪的結果這個坑爹的情況目前還沒有任何好的解決方案。我在多年前愛上了coffeScript。對于javaScript，我一直保持著深沉的愛，也十分高興得看到node.js的快速發(fā)展，但是作為一個有python背景的程序員，我更喜歡coffeeScript的簡練語法。在任何一個活...

劉東 2019-08-22 10:57 評論0 收藏0
JavaScript深入淺出

摘要：理解的函數(shù)基礎要搞好深入淺出原型使用原型模型，雖然這經常被當作缺點提及，但是只要善于運用，其實基于原型的繼承模型比傳統(tǒng)的類繼承還要強大。中文指南基本操作指南二繼續(xù)熟悉的幾對方法，包括，，。商業(yè)轉載請聯(lián)系作者獲得授權，非商業(yè)轉載請注明出處。怎樣使用 this 因為本人屬于偽前端，因此文中只看懂了 8 成左右，希望能夠給大家?guī)韼椭?...（據說是阿里的前端妹子寫的） this 的值到底...

blair 2019-08-21 18:26 評論0 收藏0
【譯】this 是什么？JavaScript 對象的內部工作原理

摘要：關鍵字會實例化一個新的對象實例，并在執(zhí)行構造函數(shù)時將指向該實例。原文鏈接譯是什么對象的內部工作原理原文鏈接：What is this? The Inner Workings of JavaScript Objects (需要梯子) 原文作者：Eric Elliott 譯文永久鏈接：【譯】什么是 this？JavaScript 對象的內部工作原理譯者：士心翻譯目的：函數(shù)動...

Hwg 2019-08-23 17:06 評論0 收藏0
【譯】2016 年 JavaScript 回顧

摘要：是在谷歌的年開發(fā)者峰會上宣布，但穩(wěn)定的技術和工具終于在月到達。固然也不能保證蘋果將實施這項技術，但這并不重要，你的應用程序仍然可以在中工作，它只是不會從離線執(zhí)行中受益。我有一種感覺一旦上體驗有明顯提升蘋果將鼓勵支持。 2016年是值得紀念、奇怪的、有點歡騰/可怕的一年，取決于你的觀點。跟其他事件相比僅僅專注于JavaScript可能看起來無關緊要，但它是每個Web開發(fā)人員的工作生活中巨...

gecko23 2019-08-21 11:20 評論0 收藏0