简单理解ECMAScript2015中的箭头函数新特性
2016-08-29 10:41
453 查看
箭头函数(Arrow functions),是ECMAScript2015中新加的特性,它的产生,主要有以下两个原因:一是使得函数表达式(匿名函数)有更简洁的语法,二是它拥有词法作用域的this值,也就是说它跟父作用域共享this,不会新产生自己作用域下的this, arguments, super 和 new.target 等对象。
以上是传统的JavaScript写法,给click方法传入一个函数作为参数,这个函数通常都需要按照以下格式输入:function(){}。使用箭头函数后,代码如下:
上面的例子比较简单,再来看一个Promise链的例子:
使用箭头函数简化上面的例子,代码如下:
从简化后的代码来看,不难发现,所有回调函数中的function 和 {}不见了,而且回调函数都在一行表示,当只有一个参数时,()也消失了;由于{}消失了,里面的return也消失了,代码看起来更加清晰、简洁了。前面提到单行表示回调函数的时候,{}被省略了,假如这时候我们要返回一个对象(包括空对象)的话,该怎么处理呢?这是个坑,一般按如下方式书写代码:
在箭头函数之前,每个新定义的函数都有自己的this值,例如,构造函数的this指向一个新的对象,如果是‘严格模式’,则this值为undefined,如果函数作为对象的方法被调用,则该函数的this指向了那个调用它的对象。在JavaScript面向对象编程中,this的指向是让新手很头疼的问题。
在箭头函数之前,我们是如何使growUp函数内部的this也指向构造函数Person()的实例对象的呢?如下:
也就是通过新增一个变量来指向期望的this对象,除此之外,还可以使用 bind 函数,把期望的 this 值传递给 growUp() 函数。
由于箭头函数会捕获其所在上下文的this值,来作为自己的this值,所以我们可以这样修改上述例子的代码:
由于 this 已经在词法层面完成了绑定,通过 call() 或 apply() 方法调用一个函数时,只是传入了参数而已,对 this 并没有什么影响:
【推荐】带SSD固态硬盘和电池的随身看片路由器开卖了
【推荐】50万行VC++源码: 大型组态工控、电力仿真CAD与GIS源码库
【推荐】移动直播百强八成都在用融云即时通讯云
【推荐】报表开发有捷径:快速设计轻松集成,数据可视化和交互
【推荐】网易云信-一天开发一个微信,独创1对1技术顾问让开发加速
【推荐】一个小型创业公司怎样低成本起步?
2. 简单理解ECMAScript2015中的Promise
3. 推荐一款非常强大的扒站工具
4. React初探
5. 生活随感
6. JS获取地址栏参数
7. JSON与对象字面值记法的区别
8. 浅析JavaScript闭包
9. Untangling Spaghetti Code: How to Write Maintainable JavaSc
使用箭头函数特性
在JavaScript代码中,函数无处不在。假设页面上有一个特定的按钮,它的id是‘clickMe’,点击它后,页面弹出“Hello,Arrow functions!”,为实现这个效果,我们会像下面这样编写JavaScript代码:$(function(){ $('#clickMe').click(function(){ alert('Hello,Arrow functions!'); }) })
以上是传统的JavaScript写法,给click方法传入一个函数作为参数,这个函数通常都需要按照以下格式输入:function(){}。使用箭头函数后,代码如下:
$(function(){ $('#clickMe').click(()=>{alert('Hello,Arrow functions!')}); })
上面的例子比较简单,再来看一个Promise链的例子:
function getUserInfo(id){ return getUsers(id). then(function(users){return users[0]}). then(checkUser). then(function(user,userInfo){return userInfo }). catch(function(error){console.log(error.message)}) }
使用箭头函数简化上面的例子,代码如下:
function getUserInfo(id){ return getUsers(id). then(users => users[0]). then(checkUser). then((user,userInfo)=>userInfo). catch(error=>console.log(error.message)) }
从简化后的代码来看,不难发现,所有回调函数中的function 和 {}不见了,而且回调函数都在一行表示,当只有一个参数时,()也消失了;由于{}消失了,里面的return也消失了,代码看起来更加清晰、简洁了。前面提到单行表示回调函数的时候,{}被省略了,假如这时候我们要返回一个对象(包括空对象)的话,该怎么处理呢?这是个坑,一般按如下方式书写代码:
const emptyObject = ()=>({})
箭头函数里面的this
开头那里已经提到了,箭头函数没有自己的this值,它跟父作用域共享this,箭头函数内部也没有constructor方法,也没有prototype,所以箭头函数不支持new操作。在箭头函数之前,每个新定义的函数都有自己的this值,例如,构造函数的this指向一个新的对象,如果是‘严格模式’,则this值为undefined,如果函数作为对象的方法被调用,则该函数的this指向了那个调用它的对象。在JavaScript面向对象编程中,this的指向是让新手很头疼的问题。
function Person(){ //构造函数的this指向实例对象自己 this.age = 25; setInterval(function growUp(){ //在非严格模式下,growUp函数定义了其内部的this,其指向window对象,不同于构造函数Person()定义的this this.age++; },1000); } var p = new Person();
在箭头函数之前,我们是如何使growUp函数内部的this也指向构造函数Person()的实例对象的呢?如下:
function Person() { var self = this; self.age = 25; setInterval(function growUp(){ self.age++; }); } var p = new Person();
也就是通过新增一个变量来指向期望的this对象,除此之外,还可以使用 bind 函数,把期望的 this 值传递给 growUp() 函数。
function Person() { this.age = 25; setInterval(function growUp(){ this.age++; console.log(this.age); }.bind(this),1000); } var p = new Person();
由于箭头函数会捕获其所在上下文的this值,来作为自己的this值,所以我们可以这样修改上述例子的代码:
function Person() { this.age = 25; setInterval(()=>{ this.age++;//这里的this也指向Person对象 },1000); }
使用 call 或 apply 调用
箭头函数的 this 始终指向函数定义时的 this,而非执行时。下面看一个试图改变箭头函数 this 指针的例子:var x = 1, o = { x : 10, test : () => this.x }; o.test(); // 1 o.test.call(o); // 仍旧是1
由于 this 已经在词法层面完成了绑定,通过 call() 或 apply() 方法调用一个函数时,只是传入了参数而已,对 this 并没有什么影响:
var adder = { base : 1, add : function(a) { var f = v => v + this.base; return f(a); }, addThruCall: function(a) { var f = v => v + this.base; var b = { base : 2 }; return f.call(b, a); } }; console.log(adder.add(1)); // 输出 2 console.log(adder.addThruCall(1)); // 仍然输出 2,而不是3
【推荐】带SSD固态硬盘和电池的随身看片路由器开卖了
【推荐】50万行VC++源码: 大型组态工控、电力仿真CAD与GIS源码库
【推荐】移动直播百强八成都在用融云即时通讯云
【推荐】报表开发有捷径:快速设计轻松集成,数据可视化和交互
【推荐】网易云信-一天开发一个微信,独创1对1技术顾问让开发加速
【推荐】一个小型创业公司怎样低成本起步?
| ||||||
日 | 一 | 二 | 三 | 四 | 五 | 六 |
---|---|---|---|---|---|---|
31 | 1 | 2 | 3 | 4 | 5 | 6 |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 | 1 | 2 | 3 |
4 | 5 | 6 | 7 | 8 | 9 | 10 |
最新随笔
1. 简单理解ECMAScript2015中的箭头函数新特性2. 简单理解ECMAScript2015中的Promise
3. 推荐一款非常强大的扒站工具
4. React初探
5. 生活随感
6. JS获取地址栏参数
7. JSON与对象字面值记法的区别
8. 浅析JavaScript闭包
9. Untangling Spaghetti Code: How to Write Maintainable JavaSc
相关文章推荐
- 简单理解ECMAScript2015中的Promise
- 关于es2015箭头函数的大括号代码块部分的一点理解
- ECMAScript 学习笔记(2)--ES6新增let、箭头函数理解
- ECMAScript 6 学习系列课程 (ES6 箭头函数的使用)
- 排名前10的ES6特性之箭头函数 【Arrow Functions】
- mysql 流程函数 存储引擎 InnoDB简单特性
- R语言函数的简单理解
- ECMAScript6的新特性箭头函数(Arrow Function)详细介绍
- 深入理解ECMAScript的函数参数
- 深入理解JavaScript中的箭头函数
- 关于ECMAScript函数参数的多方面理解
- 简单理解JavaScript中的封装与继承特性
- 模拟个apply和call的实现.方便理解这俩函数的特性
- python 装饰器、内部函数、闭包简单理解
- 函数sscanf()及sprintf()的简单讲解 --- NOJ 2015 PUMA
- 简单理解函数声明(以signal函数为例)
- Oracle中coalesce函数的简单理解
- OpenGL中的函数gluPerspective简单理解
- 面向对象3大特性的简单理解
- 简单理解JavaScript中的封装与继承特性