ES6中的箭头函数实例详解


Posted in Javascript onApril 06, 2017

本文实例讲述了ES6中的箭头函数。分享给大家供大家参考,具体如下:

语法

我们先来看看箭头函数的语法:

([param] [, param]) => {
  statements
}
param => expression

param 是参数,根据参数个数不同,分这几种情况:

() => { … } // 零个参数用 () 表示;
x => { … } // 一个参数可以省略 ();
(x, y) => { … } // 多参数不能省略 ();

示例

我们再来看看一些示例,看看在ES5中的函数怎么通过ES6中的箭头函数来替代吧:

// ES5
var selected = allJobs.filter(function (job) {
 return job.isSelected();
});
// ES6
var selected = allJobs.filter(job => job.isSelected());

当然,也可以定义多个参数:

// ES5
var total = values.reduce(function (a, b) {
 return a + b;
}, 0);
// ES6
var total = values.reduce((a, b) => a + b, 0);

当然=>后面也不一定非得接return 之后的语句,看下面:

// ES5
$("#confetti-btn").click(function (event) {
 playTrumpet();
 fireConfettiCannon();
});
// ES6
$("#confetti-btn").click(event => {
 playTrumpet();
 fireConfettiCannon();
});

但是需要注意的是,多行语句需要用{}括起来,单行表达式不需要{},并且会作为函数返回值。

x => { return x * x }; // 函数返回 x * x
x => x * x; // 同上一行
x => return x * x; // SyntaxError 报错,不能省略 {}
x => { x * x }; // 合法,没有定义返回值,返回 undefined

和普通函数一样,箭头函数也可以使用剩余参数和默认参数

var func1 = (x = 1, y = 2) => x + y;
func1(); // 得到 3
var func2 = (x, ...args) => { console.log(args) };
func2(1,2,3); // 输出 [2, 3]

特性

介绍完了箭头表达式的语法和示例,我们就需要思考一下了。如果箭头表达式仅仅就是简化了函数的命名,我们为什么要改变原来的习惯而去使用它呢?所以我们需要了解一下箭头函数的特性。

箭头函数内部没有constructor方法,也没有prototype,所以不支持new操作。但是它对this的处理与一般的普通函数不一样。箭头函数的 this 始终指向函数定义时的 this,而非执行时。我们通过一个例子来理解:

var o = {
  x : 1,
  func : function() { console.log(this.x) },
  test : function() {
    setTimeout(function() {
      this.func();
    }, 100);
  }
};
o.test(); // TypeError : this.func is not a function

上面的代码会出现错误,因为this的指向从o变为了全局(函数调用中的this都是指向全局的)。如果大家对JavaScript中的this不是很熟悉的话,可以看看前面的一篇文章《javascript中this的用法实例详解》。好了,回归正题,我们需要修改上面的代码如下:

var o = {
  x : 1,
  func : function() { console.log(this.x) },
  test : function() {
    var _this = this;
    setTimeout(function() {
      _this.func();
    }, 100);
  }
};
o.test();

通过使用外部事先保存的this就行了。这里就可以利用到箭头函数了,我们刚才说过,箭头函数的 this 始终指向函数定义时的 this,而非执行时。所以我们将上面的代码修改如下:

var o = {
  x : 1,
  func : function() { console.log(this.x) },
  test : function() {
    setTimeout(() => { this.func() }, 100);
  }
};
o.test();

这回this就指向o了。

我们还需要注意一点的就是这个this是不会改变指向对象的,我们知道call和apply可以改变this的指向,但是在箭头函数中是无效的。

var x = 1,
  o = {
    x : 10,
    test : () => this.x
  };
o.test(); // 1
o.test.call(o); // 依然是1

希望本文所述对大家ECMAScript程序设计有所帮助。

Javascript 相关文章推荐
用Javascript实现UTF8编码转换成gb2312编码
Dec 22 Javascript
JS创建优美的页面滑动块效果 - Glider.js
Sep 27 Javascript
纯js实现的论坛常用的运行代码的效果
Jul 15 Javascript
Javascript排序算法之合并排序(归并排序)的2个例子
Apr 04 Javascript
JavaScript清空数组元素的两种方法简单比较
Jul 10 Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
Sep 15 Javascript
详解Javascript数据类型的转换规则
Dec 12 Javascript
Jquery Easyui日历组件Calender使用详解(23)
Dec 18 Javascript
ECMAScript6 新特性范例大全
Mar 24 Javascript
微信小程序中的swiper组件详解
Apr 14 Javascript
原生js实现文件上传、下载、封装等实例方法
Jan 05 Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
Feb 05 Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
Apr 06 #Javascript
详谈js遍历集合(Array,Map,Set)
Apr 06 #Javascript
javascript中this用法实例详解
Apr 06 #Javascript
selenium 与 chrome 进行qq登录并发邮件操作实例详解
Apr 06 #Javascript
js遍历获取表格内数据的方法(必看)
Apr 06 #Javascript
JS优化与惰性载入函数实例分析
Apr 06 #Javascript
大白话讲解JavaScript的Promise
Apr 06 #Javascript
You might like
php桌面中心(三) 修改数据库
2007/03/11 PHP
Yii把CGridView文本框换成下拉框的方法
2014/12/03 PHP
在WordPress中实现发送http请求的相关函数解析
2015/12/29 PHP
PHP中函数gzuncompress无法使用的解决方法
2017/03/02 PHP
phpfpm的作用和用法
2019/10/10 PHP
jQuery 研究心得 取得属性的值
2007/11/30 Javascript
jquery easyui中treegrid用法的简单实例
2014/02/18 Javascript
JS实现的一个简单的Autocomplete自动完成例子
2014/04/16 Javascript
js中substring和substr的定义和用法
2014/05/05 Javascript
JS实现很酷的EMAIL地址添加功能实例
2015/02/28 Javascript
jQuery ajax调用webservice注意事项
2017/10/08 jQuery
解决LayUI表单获取不到data的问题
2018/08/20 Javascript
Vue中Axios从远程/后台读取数据
2019/01/21 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
2019/06/03 Javascript
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题
2019/09/27 Javascript
JavaScript基于面向对象实现的无缝滚动轮播示例
2020/01/17 Javascript
详解Vue的ref特性的使用
2020/01/24 Javascript
[50:27]OG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26
2018/08/30 DOTA
[01:42:49]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第一场 2月26日
2021/03/11 DOTA
python测试驱动开发实例
2014/10/08 Python
详解Python中用于计算指数的exp()方法
2015/05/14 Python
python如何发布自已pip项目的方法步骤
2018/10/09 Python
pygame实现成语填空游戏
2019/10/29 Python
浅谈numpy中np.array()与np.asarray的区别以及.tolist
2020/06/03 Python
5分钟弄清楚html5的drag and drop(小结)
2019/04/10 HTML / CSS
丝芙兰香港官网:Sephora香港
2018/03/13 全球购物
优秀研究生自我鉴定
2013/12/04 职场文书
质检部职责
2013/12/28 职场文书
欢送退休感言
2014/02/08 职场文书
企业消防安全责任书
2014/07/23 职场文书
信用卡工资证明格式
2014/09/13 职场文书
2014年建筑工作总结
2014/11/26 职场文书
2015应届毕业生求职信范文
2015/03/20 职场文书
撤诉申请怎么写
2015/05/19 职场文书
2016入党积极分子党课培训心得体会
2016/01/06 职场文书
Tomcat 与 maven 的安装与使用教程
2022/06/16 Servers