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 相关文章推荐
javascript中为某个元素指定事件的三种方式
Aug 07 Javascript
JS实现仿google、百度搜索框输入信息智能提示的实现方法
Apr 20 Javascript
深入浅析JavaScript面向对象和原型函数
Feb 06 Javascript
Backbone.js框架中简单的View视图编写学习笔记
Feb 14 Javascript
又一款js时钟!transform实现时钟效果
Aug 15 Javascript
详解jQuery uploadify文件上传插件的使用方法
Dec 16 Javascript
谈谈Vue.js——vue-resource全攻略
Jan 16 Javascript
Javascript中数组去重与拍平的方法示例
Feb 03 Javascript
webpack2.0配置postcss-loader的方法
Aug 17 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
Nov 06 Javascript
微信小程序带动画弹窗组件使用方法详解
Nov 27 Javascript
通过实例解析js简易模块加载器
Jun 17 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
PHP新手上路(二)
2006/10/09 PHP
PHP中usort在值相同时改变原始位置问题的解决方法
2011/11/27 PHP
eaglephp使用微信api接口开发微信框架
2014/01/09 PHP
分享PHP源码批量抓取远程网页图片并保存到本地的实现方法
2015/12/01 PHP
WordPress中Gravatar头像缓存到本地及相关优化的技巧
2015/12/19 PHP
php生成txt文件实例代码介绍
2016/04/28 PHP
浅析PHP类的反射来实现依赖注入过程
2018/02/06 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
YII2框架中actions的作用与使用方法示例
2020/03/13 PHP
跟我一起学写jQuery插件开发方法(附完整实例及下载)
2010/04/01 Javascript
jQuery LigerUI 使用教程表格篇(1)
2012/01/18 Javascript
Struts2的s:radio标签使用及用jquery添加change事件
2013/04/08 Javascript
asm.js使用示例代码
2013/11/28 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
2015/06/14 Javascript
JavaScript判断对象是否为数组
2015/12/22 Javascript
详解AngularJS中的http拦截
2016/02/09 Javascript
原生js实现百叶窗效果及原理介绍
2016/04/12 Javascript
详解vue 模版组件的三种用法
2017/07/21 Javascript
用Node提供静态文件服务的方法
2018/07/06 Javascript
ES6的解构赋值实例详解
2019/05/06 Javascript
如何使用 vue-cli 创建模板项目
2020/11/19 Vue.js
python 从远程服务器下载日志文件的程序
2013/02/10 Python
python文件和目录操作方法大全(含实例)
2014/03/12 Python
Python实现对百度云的文件上传(实例讲解)
2017/10/21 Python
Python 多线程不加锁分块读取文件的方法
2018/12/11 Python
Django web框架使用url path name详解
2019/04/29 Python
python实现计算器功能
2019/10/31 Python
python Jupyter运行时间实例过程解析
2019/12/13 Python
python中sklearn的pipeline模块实例详解
2020/05/21 Python
HTML5 canvas基本绘图之填充样式实现
2016/06/27 HTML / CSS
成人高等教育毕业生自我鉴定
2013/10/22 职场文书
养殖项目策划书范文
2014/01/13 职场文书
纪念九一八事变演讲稿:青少年应树立远大理想
2014/09/14 职场文书
小学国庆节活动方案策划书
2014/09/16 职场文书
购房委托书范本
2014/09/18 职场文书
2016年度优秀辅导员事迹材料
2016/02/26 职场文书