JavaScript箭头(arrow)函数详解


Posted in Javascript onJune 04, 2017

为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。

本文我们介绍箭头(arrow)函数的优点。

更简洁的语法

我们先来按常规语法定义函数:

function funcName(params) {
  return params + 2;
 }
funcName(2);
// 4

该函数使用箭头函数可以使用仅仅一行代码搞定!

var funcName = (params) => params + 2
funcName(2);
// 4

是不是很酷!虽然是一个极端简洁的例子,但是很好的表述了箭头函数在写代码时的优势。我们来深入了解箭头函数的语法:
(parameters) => { statements }

如果没有参数,那么可以进一步简化:
() => { statements }

如果只有一个参数,可以省略括号:
parameters => { statements }

如果返回值仅仅只有一个表达式(expression), 还可以省略大括号:
parameters => expression

// 等价于:
function (parameters){
 return expression;
}

现在你已经学会了箭头函数的语法,我们来实战一下。打开Chrome浏览器开发者控制台,输入:
var double = num => num * 2

我们将变量 double 绑定到一个箭头函数,该函数有一个参数 num , 返回 num * 2 。 调用该函数:

double(2);
// 4

double(3);
// 6

没有局部 this 的绑定

和一般的函数不同,箭头函数不会绑定 this 。 或则说箭头函数不会改变 this 本来的绑定。

我们用一个例子来说明:

function Counter() {
 this.num = 0;
}
var a = new Counter();

因为使用了关键字 new 构造,Count()函数中的 this 绑定到一个新的对象,并且赋值给 a 。通过 console.log 打印

a.num ,会输出0。 
console.log(a.num);
// 0

如果我们想每过一秒将 a.num 的值加1,该如何实现呢?可以使用 setInterval() 函数。

function Counter() {
 this.num = 0;
 this.timer = setInterval(function add() {
  this.num++;
  console.log(this.num);
 }, 1000);
}

我们来看一下输出结果:

var b = new Counter();
// NaN
// NaN
// NaN
// ...

你会发现,每隔一秒都会有一个 NaN 打印出来,而不是累加的数字。到底哪里错了呢?

首先使用如下语句停止 setInterval 函数的连续执行:
clearInterval(b.timer);

我们来尝试理解为什么出错:根据上一篇博客讲解的规则,首先函数 setInterval 没有被某个声明的对象调用,也没有使用 new 关键字,再之没有使用 bind , call 和 apply 。 setInterval 只是一个普通的函数。实际上 setInterval 里面的 this 绑定到全局对象的。我们可以通过将 this 打印出来验证这一点:

function Counter() {
 this.num = 0;
this.timer = setInterval(function add() {
  console.log(this);
 }, 1000);
}
var b = new Counter();

你会发现,整个 window 对象被打印出来。 使用如下命令停止打印:
clearInterval(b.timer);

回到之前的函数,之所以打印 NaN ,是因为 this.num 绑定到 window 对象的 num ,而 window.num 未定义。

那么,我们如何解决这个问题呢?使用箭头函数!使用箭头函数就不会导致 this 被绑定到全局对象。

function Counter() {
 this.num = 0;
 this.timer = setInterval(() => {
  this.num++;
  console.log(this.num);
 }, 1000);
}
var b = new Counter();
// 1
// 2
// 3
// ...

通过 Counter 构造函数绑定的 this 将会被保留。在 setInterval 函数中, this 依然指向我们新创建的 b 对象。

为了验证刚刚的说法,我们可以将 Counter 函数中的 this 绑定到 that , 然后在 setInterval 中判断 this 和 that 是否相同。

function Counter() {
 var that = this;
 this.timer = setInterval(() => {
  console.log(this === that);
 }, 1000);
}
var b = new Counter();
// true
// true
// ...

正如我们期望的,打印值每次都是 true 。最后,结束刷屏的打印:
clearInterval(b.timer);

总结

1.箭头函数写代码拥有更加简洁的语法;

2. 不会绑定 this 。

原文: JavaScript: Arrow Functions for Beginners

译者: Fundebug

译者按:箭头函数看上去只是语法的变动,其实也影响了 this 的作用域。

Javascript 相关文章推荐
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
Dec 27 Javascript
js 匿名调用实现代码
Jun 19 Javascript
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
Feb 26 Javascript
jQuery下通过replace字符串替换实现大小图片切换
May 22 Javascript
gridpanel动态加载数据的实例代码
Jul 18 Javascript
jqGrid增加时--判断开始日期与结束日期(实例解析)
Nov 08 Javascript
javascript中setTimeout使用指南
Jul 26 Javascript
jquery+css实现动感的图片切换效果
Nov 25 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
Apr 22 Javascript
Vue.js实现输入框绑定的实例代码
Aug 24 Javascript
Vue 实现分页与输入框关键字筛选功能
Jan 02 Javascript
Vant 中的Toast设置全局的延迟时间操作
Nov 04 Javascript
Angular 4依赖注入学习教程之简介(一)
Jun 04 #Javascript
angularJs中datatable实现代码
Jun 03 #Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
Jun 03 #Javascript
详解JavaScript调用栈、尾递归和手动优化
Jun 03 #Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
Jun 03 #Javascript
利用vueJs实现图片轮播实例代码
Jun 03 #Javascript
angular中使用Socket.io实例代码
Jun 03 #Javascript
You might like
解析php5配置使用pdo
2013/07/03 PHP
thinkPHP js文件中U方法不被解析问题的解决方法
2016/12/05 PHP
php cli模式下获取参数的方法
2017/05/05 PHP
PHP编程实现脚本异步执行的方法
2017/08/09 PHP
PHP+Ajax实现的检测用户名功能简单示例
2019/02/12 PHP
javascript生成/解析dom的CDATA类型的字段的代码
2007/04/22 Javascript
添加JavaScript重载函数的辅助方法2
2010/07/04 Javascript
JS实现图片预加载无需等待
2012/12/21 Javascript
裁剪字符串trim()自定义改进版
2013/04/10 Javascript
Javascript表格翻页效果的具体实现
2013/10/05 Javascript
用js实现in_array的方法
2013/11/05 Javascript
基于NodeJS的前后端分离的思考与实践(一)全栈式开发
2014/09/26 NodeJs
JavaScript使用indexOf获得子字符串在字符串中位置的方法
2015/04/06 Javascript
利用Bootstrap实现表格复选框checkbox全选
2016/12/21 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
2016/12/22 Javascript
Vue+webpack项目基础配置教程
2018/02/12 Javascript
在vue项目中集成graphql(vue-ApolloClient)
2018/09/08 Javascript
Python时区设置方法与pytz查询时区教程
2013/11/27 Python
Python中的面向对象编程详解(上)
2015/04/13 Python
python清除字符串里非字母字符的方法
2015/07/02 Python
解决python nohup linux 后台运行输出的问题
2018/05/11 Python
python的一些加密方法及python 加密模块
2019/07/11 Python
CSS3实现缺角矩形,折角矩形以及缺角边框
2019/12/20 HTML / CSS
基于HTML5 FileSystem API的使用介绍
2013/04/24 HTML / CSS
Pretty You London官网:英国拖鞋和睡衣品牌
2019/05/08 全球购物
校园网站的创业计划书范文
2013/12/30 职场文书
2014年计算机专业个人自我评价
2014/01/19 职场文书
鲜果饮品店创业计划书
2014/01/21 职场文书
《燕子》教学反思
2014/02/18 职场文书
三严三实对照检查材料
2014/08/25 职场文书
个人主要事迹材料
2014/08/26 职场文书
2014国庆节商场促销活动策划方案
2014/09/16 职场文书
电影小兵张嘎观后感
2015/06/03 职场文书
聘任合同书
2015/09/21 职场文书
小学生优秀作文范文(六篇)
2019/07/10 职场文书
vue项目多环境配置(.env)的实现
2021/07/21 Vue.js