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的原生方法获取数组中的最大(最小)值
Dec 19 Javascript
JS调用CS里的带参方法实例
Aug 01 Javascript
改变文件域的样式实现思路同时兼容ie、firefox
Oct 23 Javascript
node.js中的fs.ftruncate方法使用说明
Dec 15 Javascript
js Calender控件使用详解
Jan 05 Javascript
javascript实现图片上传前台页面
Aug 18 Javascript
5种JavaScript脚本加载的方式
Jan 16 Javascript
BootStrap实现带关闭按钮功能
Feb 15 Javascript
ES6入门教程之Iterator与for...of循环详解
May 17 Javascript
JS身份证信息验证正则表达式
Jun 12 Javascript
angular学习之动态创建表单的方法
Dec 07 Javascript
vue如何使用rem适配
Feb 06 Vue.js
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
SMARTY学习手记
2007/01/04 PHP
php实现的验证码文件类实例
2015/06/18 PHP
php正确输出json数据的实例讲解
2018/08/21 PHP
jquery中dom操作和事件的实例学习-表单验证
2011/11/30 Javascript
js获取select默认选中的Option并不是当前选中值
2014/05/07 Javascript
jQuery中:first选择器用法实例
2014/12/30 Javascript
JavaScript触发onScroll事件的函数节流详解
2016/12/14 Javascript
微信小程序利用co处理异步流程的方法教程
2017/05/20 Javascript
详解webpack自动生成html页面
2017/06/29 Javascript
十个免费的web前端开发工具详细整理
2017/09/18 Javascript
jQuery 防止相同的事件快速重复触发方法
2018/02/08 jQuery
详解vue中点击空白处隐藏div的实现(用指令实现)
2018/04/19 Javascript
JS+HTML5实现获取手机验证码倒计时按钮
2018/08/08 Javascript
详解vuex状态管理模式
2018/11/01 Javascript
layui使用form表单实现post请求页面跳转的方法
2019/09/14 Javascript
在Vue项目中使用Typescript的实现
2019/12/19 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
2020/04/26 Javascript
Python实现的简单排列组合算法示例
2018/07/04 Python
PyTorch读取Cifar数据集并显示图片的实例讲解
2018/07/27 Python
python将txt文档每行内容循环插入数据库的方法
2018/12/28 Python
详解Python中的测试工具
2019/06/09 Python
python+jinja2实现接口数据批量生成工具
2019/08/28 Python
Python pip配置国内源的方法
2020/02/14 Python
Python 实现自动完成A4标签排版打印功能
2020/04/09 Python
美国百货齐全的精品网站,提供美式风格的产品:Overstock.com
2016/07/22 全球购物
xml有哪些解析技术?区别是什么
2016/04/26 面试题
ruby如何进行集成操作?Ruby能进行多重继承吗?
2013/10/16 面试题
保洁主管岗位职责
2013/11/20 职场文书
计算机软件个人的自荐信范文
2013/12/01 职场文书
中级会计职业生涯规划范文
2014/01/16 职场文书
2015年世界水日活动总结
2015/02/09 职场文书
士兵突击观后感
2015/06/16 职场文书
繁星春水读书笔记
2015/06/30 职场文书
2015年秋季运动会广播稿
2015/08/19 职场文书
javascript遍历对象的五种方式实例代码
2021/10/24 Javascript
Docker官方工具docker-registry案例演示
2022/04/13 Servers