JavaScript ES6箭头函数指南

作者: Gerhard_杨光辉 | 来源:发表于2018-04-11 12:51 被阅读55次

箭头函数介绍
ES6箭头函数简介
JavaScript ES6箭头函数指南
es6全家桶（二）—— 箭头函数
深入理解ES6中的箭头函数
es6、js、css、jquery、vue以及程序设计知识点总
箭头函数
ES6：函数
学习 ES 6 箭头函数
JavaScript箭头函数

前言

胖箭头函数（Fat arrow functions），又称箭头函数，是一个来自ECMAScript 2015（又称ES6）的全新特性。有传闻说，箭头函数的语法=>，是受到了CoffeeScript 的影响，并且它与CoffeeScript中的=>语法一样，共享this上下文。

箭头函数的产生，主要由两个目的：更简洁的语法和与父作用域共享关键字this。接下来，让我们来看几个详细的例子。

新的函数语法

传统的JavaScript函数语法并没有提供任何的灵活性，每一次你需要定义一个函数时，你都必须输入function () {}。CoffeeScript如今之所以那么火，有一个不可忽略的原因就是它有更简洁的函数语法。更简洁的函数语法在有大量回调函数的场景下好处特别明显，让我们从一个Promise链的例子看起：

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

以下是使用新的箭头函数语法进行重构后的代码：

functiongetVerifiedToken(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 () { return1; }() => { return1; }() => 1function (a) { return a * 2; }(a) => { return a * 2; }(a) => a * 2a => a * 2function (a, b) { return a * b; }(a, b) => { return a * b; }(a, b) => a * b function () { returnarguments[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变量：

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

再次重申，箭头函数没有属于自己的this和arguments。但是，你仍可以通过rest参数，来得到所有传入的参数数组：

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