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 相关文章推荐
XHTML-Strict 内允许出现的标签
Dec 11 Javascript
jQuery 技巧大全(新手入门篇)
May 12 Javascript
用Javascript评估用户输入密码的强度实现代码
Nov 30 Javascript
js function定义函数的几种不错方法
Feb 27 Javascript
JavaScript中的this使用详解
Jul 27 Javascript
ReactJs快速入门教程(精华版)
Nov 28 Javascript
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
浅谈Koa2框架利用CORS完成跨域ajax请求
Mar 06 Javascript
Vue中使用Sortable的示例代码
Apr 07 Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
Sep 06 Javascript
node.js中fs文件系统模块的使用方法实例详解
Feb 13 Javascript
JS函数参数的传递与同名参数实例分析
Mar 16 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.ini中添加extension=php_mysqli.dll指令的说明
2007/06/14 PHP
jQuery 源码分析笔记(4) Ready函数
2011/06/02 Javascript
页面右下角弹出提示框示例代码js版
2013/08/02 Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
2014/09/25 Javascript
JS去除iframe滚动条的方法
2015/04/01 Javascript
js实现瀑布流的三种方式比较
2020/06/28 Javascript
jQuery中选择器的基础使用教程
2016/05/23 Javascript
Js 获取、判断浏览器版本信息的简单方法
2016/08/08 Javascript
jQuery实现别踩白块儿网页版小游戏
2017/01/18 Javascript
Node.js环境下Koa2添加travis ci持续集成工具的方法
2017/06/19 Javascript
JavaScript实现百度搜索框效果
2020/03/26 Javascript
Angular如何在应用初始化时运行代码详解
2018/06/11 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
2019/07/10 jQuery
Vue中多元素过渡特效的解决方案
2020/02/05 Javascript
使用 UniApp 实现小程序的微信登录功能
2020/06/09 Javascript
详解JS预解析原理
2020/06/16 Javascript
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
[37:02]OG vs INfamous 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
[47:42]完美世界DOTA2联赛PWL S2 GXR vs Ink 第一场 11.19
2020/11/20 DOTA
对Python的Django框架中的项目进行单元测试的方法
2016/04/11 Python
Python实现将json文件中向量写入Excel的方法
2018/03/26 Python
详谈在flask中使用jsonify和json.dumps的区别
2018/03/26 Python
Gauss-Seidel迭代算法的Python实现详解
2019/06/29 Python
Pandas将列表(List)转换为数据框(Dataframe)
2020/04/24 Python
用python给csv里的数据排序的具体代码
2020/07/17 Python
Html5写一个简单的俄罗斯方块小游戏
2019/12/03 HTML / CSS
英国鹦鹉店:Parrot Essentials
2018/12/03 全球购物
英国名牌男装店:Standout
2021/02/17 全球购物
人事主管岗位职责范本
2013/12/04 职场文书
总裁秘书岗位职责
2013/12/04 职场文书
仓库管理制度
2014/01/21 职场文书
一年级学生评语
2014/04/23 职场文书
厨师长岗位职责范本
2014/08/25 职场文书
2014年优质护理服务工作总结
2014/11/14 职场文书
2014年度思想工作总结
2014/11/27 职场文书
男方家长婚礼答谢词
2015/09/29 职场文书