JavaScript ES6箭头函数使用指南


Posted in Javascript onDecember 30, 2018

胖箭头函数(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。

本文详细说明了JavaScript ES6新特性之一的箭头函数的使用方法和一些注意事项,大家在使用时一定要注意,箭头函数用好了是非常快捷的,如果用不好的话也是非常令人头痛的

Javascript 相关文章推荐
jQuery 学习6 操纵元素显示效果的函数
Feb 07 Javascript
jQuery表单域选择器用法分析
Feb 10 Javascript
JS获取图片lowsrc属性的方法
Apr 01 Javascript
js库Modernizr的介绍和使用
May 07 Javascript
jQuery插件Validate实现自定义表单验证
Jan 18 Javascript
js canvas实现放大镜查看图片功能
Jun 08 Javascript
vue-router传递参数的几种方式实例详解
Nov 13 Javascript
JS数组去重的6种方法完整实例
Dec 08 Javascript
微信小程序云开发修改云数据库中的数据方法
May 18 Javascript
vue递归组件实战之简单树形控件实例代码
Aug 27 Javascript
JavaScript实现简单计算器功能
Dec 19 Javascript
Javascript如何实现扩充基本类型
Aug 26 Javascript
JavaScript创建防篡改对象的方法分析
Dec 30 #Javascript
JavaScript事件对象深入详解
Dec 30 #Javascript
JavaScript继承的特性与实践应用深入详解
Dec 30 #Javascript
JavaScript函数的特性与应用实践深入详解
Dec 30 #Javascript
基于Three.js实现360度全景图片
Dec 30 #Javascript
three.js实现圆柱体
Dec 30 #Javascript
three.js实现炫酷的全景3D重力感应
Dec 30 #Javascript
You might like
西德产收音机
2021/03/01 无线电
无线电广播的开始
2002/01/30 无线电
关于PHP内存溢出问题的解决方法
2013/06/25 PHP
thinkphp关于简单的权限判定方法
2017/04/03 PHP
基于jQuery图片平滑连续滚动插件
2009/04/27 Javascript
JavaScript中null与undefined分析
2009/07/25 Javascript
JavaScript 类似flash效果的立体图片浏览器
2010/02/08 Javascript
JSON 教程 json入门学习笔记
2020/09/22 Javascript
jQuery学习笔记 更改jQuery对象
2012/09/19 Javascript
javascript重复绑定事件造成的后果说明
2013/03/02 Javascript
javascript文本框内输入文字倒计数的方法
2015/02/24 Javascript
iframe跨域通信封装详解
2015/08/11 Javascript
原生JavaScript制作计算器
2016/10/16 Javascript
微信小程序 获取相册照片实例详解
2016/11/16 Javascript
React降级配置及Ant Design配置详解
2018/12/27 Javascript
JS中的函数与对象的创建方式
2019/05/12 Javascript
移动端底部导航固定配合vue-router实现组件切换功能
2019/06/13 Javascript
layui使用数据表格实现购物车功能
2019/07/26 Javascript
layui输入框中只允许输入整数的实现方法
2019/09/18 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
2019/09/19 Javascript
利用React高阶组件实现一个面包屑导航的示例
2020/08/23 Javascript
Vue中使用wangeditor富文本编辑的问题
2021/02/07 Vue.js
Python post请求实现代码实例
2020/02/28 Python
python exit出错原因整理
2020/08/31 Python
AmazeUI 输入框组的示例代码
2020/08/14 HTML / CSS
Raleigh兰令自行车美国官网:英国凤头牌自行车
2018/01/08 全球购物
灵泰克Java笔试题
2016/01/09 面试题
毕业生简单求职信
2013/11/19 职场文书
大学生就业推荐信范文
2013/11/29 职场文书
学生党支部先进事迹
2014/02/04 职场文书
演讲主持词
2014/03/18 职场文书
我的中国梦口号
2014/06/16 职场文书
论文评审意见
2015/06/05 职场文书
实习报告范文之电话客服岗位
2019/07/26 职场文书
Mysql基础之常见函数
2021/04/22 MySQL
Python实现老照片修复之上色小技巧
2021/10/16 Python