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写了一个清除“logo1_.exe”的杀毒工具(可扫描目录)
Feb 09 Javascript
JS获取scrollHeight问题想到的标准问题
May 27 Javascript
分享一款基于jQuery的视频播放插件
Oct 09 Javascript
jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
Jan 18 Javascript
实用jquery操作表单元素的简单代码
Jul 04 Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
Oct 14 Javascript
轻松理解JavaScript之AJAX
Mar 15 Javascript
详解用node.js实现简单的反向代理
Jun 26 Javascript
基于DOM节点删除之empty和remove的区别(详解)
Sep 11 Javascript
JavaScript变量提升和严格模式实例分析
Jan 27 Javascript
JavaScript实现轮播图效果代码实例
Sep 28 Javascript
简单了解Vue computed属性及watch区别
Jul 10 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开发GUI
2006/10/09 PHP
php 获取一个月第一天与最后一天的代码
2010/05/16 PHP
php 注释规范
2012/03/29 PHP
解析PHP自带的进位制之间的转换函数
2013/06/08 PHP
php 表单提交大量数据发生丢失的解决方法
2014/03/03 PHP
php实现的数字验证码及数字运算验证码
2015/07/30 PHP
Laravel登录失败次数限制的实现方法
2020/08/26 PHP
可拖动窗口,附带鼠标控制渐变透明,开启关闭功能
2006/06/26 Javascript
Jquery提交表单 Form.js官方插件介绍
2012/03/01 Javascript
JS复制内容到剪切板的实例代码(兼容IE与火狐)
2013/11/19 Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
2016/08/15 Javascript
gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)
2016/08/24 Javascript
JS解决移动web开发手机输入框弹出的问题
2017/03/31 Javascript
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
2017/05/24 Javascript
Django使用多数据库的方法
2017/09/06 Javascript
解决layer弹层遮罩挡住窗体的问题
2018/08/17 Javascript
微信小程序如何修改本地缓存key中单个数据的详解
2019/04/26 Javascript
JavaScript提升机制Hoisting详解
2019/10/23 Javascript
微信小程序登录时如何获取input框中的内容
2019/12/04 Javascript
微信小程序背景音乐开发详解
2019/12/12 Javascript
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
2020/08/06 Javascript
jQuery中getJSON跨域原理的深入讲解
2020/09/02 jQuery
原生js实现简单轮播图
2020/10/26 Javascript
Python中的__SLOTS__属性使用示例
2015/02/18 Python
Python实现的简单dns查询功能示例
2017/05/24 Python
将python代码和注释分离的方法
2018/04/21 Python
python验证码识别教程之利用滴水算法分割图片
2018/06/05 Python
django获取from表单multiple-select的value和id的方法
2019/07/19 Python
修改Pandas的行或列的名字(重命名)
2019/12/18 Python
Pandas读取csv时如何设置列名
2020/06/02 Python
python设置表格边框的具体方法
2020/07/17 Python
档案保密承诺书
2014/06/03 职场文书
民主评议党员自我评议范文2014
2014/09/26 职场文书
对学校的意见和建议
2015/06/04 职场文书
拿破仑传读书笔记
2015/07/01 职场文书
JavaScript实现淘宝商品图切换效果
2021/04/29 Javascript