[译]JavaScript ES6箭头函数指南

makeFoxPlay 发布于2019-08-14 12:35 / 2335人阅读

摘要：以下例子的目的是使用来展示一个每秒都会更新的时钟当尝试在的回调中使用来引用元素时，很不幸，我们得到的只是一个属于回调函数自身上下文的。

前言

胖箭头函数（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）的箭头函数时，这并不意味着这条声明不能够分成多行写。

这里有一个坑，当忽略了{}后，我们该怎么返回空对象（{}）呢？

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

不幸的是，空对象{}和空白函数代码块{}长得一模一样。。以上的例子中，emptyObject的{}会被解释为一个空白函数代码块，所以emptyObject()会返回undefined。如果要在箭头函数中明确地返回一个空对象，则你不得不将{}包含在一对圆括号中(({}))：

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的故事已经是非常古老了，每一个函数都有自己的上下文。以下例子的目的是使用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。

原文链接

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

云服务器 GPU云服务器箭头云服务器安装使用指南箭头函数 javascript指南 javascript教程指南

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/64576.html

深入理解JavaScript

摘要：深入之继承的多种方式和优缺点深入系列第十五篇，讲解各种继承方式和优缺点。对于解释型语言例如来说，通过词法分析语法分析语法树，就可以开始解释执行了。 JavaScript深入之继承的多种方式和优缺点 JavaScript深入系列第十五篇，讲解JavaScript各种继承方式和优缺点。写在前面本文讲解JavaScript各种继承方式和优缺点。但是注意：这篇文章更像是笔记，哎，再让我...

myeveryheart 2019-08-22 13:46 评论0 收藏0
[译] 从 CoffeeScript 迁移到 ES6

摘要：语法校验会给出警告当你仍在使用或不通过任何关键字声明变量时。但是如果脚本中还有其他的普通导出，就会得到非常奇怪的结果这个坑爹的情况目前还没有任何好的解决方案。我在多年前爱上了coffeScript。对于javaScript，我一直保持着深沉的爱，也十分高兴得看到node.js的快速发展，但是作为一个有python背景的程序员，我更喜欢coffeeScript的简练语法。在任何一个活...

刘东 2019-08-22 10:57 评论0 收藏0
JavaScript深入浅出

摘要：理解的函数基础要搞好深入浅出原型使用原型模型，虽然这经常被当作缺点提及，但是只要善于运用，其实基于原型的继承模型比传统的类继承还要强大。中文指南基本操作指南二继续熟悉的几对方法，包括，，。商业转载请联系作者获得授权，非商业转载请注明出处。怎样使用 this 因为本人属于伪前端，因此文中只看懂了 8 成左右，希望能够给大家带来帮助....（据说是阿里的前端妹子写的） this 的值到底...

blair 2019-08-21 18:26 评论0 收藏0
【译】this 是什么？JavaScript 对象的内部工作原理

摘要：关键字会实例化一个新的对象实例，并在执行构造函数时将指向该实例。原文链接译是什么对象的内部工作原理原文链接：What is this? The Inner Workings of JavaScript Objects (需要梯子) 原文作者：Eric Elliott 译文永久链接：【译】什么是 this？JavaScript 对象的内部工作原理译者：士心翻译目的：函数动...

Hwg 2019-08-23 17:06 评论0 收藏0
【译】2016 年 JavaScript 回顾

摘要：是在谷歌的年开发者峰会上宣布，但稳定的技术和工具终于在月到达。固然也不能保证苹果将实施这项技术，但这并不重要，你的应用程序仍然可以在中工作，它只是不会从离线执行中受益。我有一种感觉一旦上体验有明显提升苹果将鼓励支持。 2016年是值得纪念、奇怪的、有点欢腾/可怕的一年，取决于你的观点。跟其他事件相比仅仅专注于JavaScript可能看起来无关紧要，但它是每个Web开发人员的工作生活中巨...

gecko23 2019-08-21 11:20 评论0 收藏0