ES6 Lesson 5 – 箭头函数
本节主要学习了箭头函数(arrow funcion
),它有三个特点:
- 看起来非常简明
- 可以隐式返回(
return
) - 不绑定
this
1. 简明语法
首先来看简明语法与普通写法的对比,例如我们需要一个简单的sum函数:
// es5写法 function sum (a, b) { return a + b } sum(1, 2) // =>3 // es6写法 let sum = (a, b) => { return a + b } sum(1, 2) // =>3
从上面的例子可以看出:es6比es5代码减少了function
关键字,使用箭头来代替,不过这样看你可能觉得也没什么差别嘛,那么请继续往下看,我们换一个函数,例如是让某个值变成2倍的匿名函数,可以直接这样写:
// es6写法 num => { return num * 2 }
如果你的参数只有一个,那么可以直接不写括号。(如果没有参数,需要保留括号)
2. 直接返回
用上的例子来改造一下:
// es6写法 num => num * 2
这个比较简单,需要记得两去一移动规则即可:
- 移到同一行
- 去掉大括号
- 去掉
return
这种方法在我们只需要一些简单的返回函数时,可以让我们的函数变得非常简洁
3. this函数的指向区别
感觉虽然理解了,但是自己描述不好这个this,不如先看这个(变年轻)例子:
const user = { name: 'Fea', age: 25, getAge: function () { setInterval(function () { console.log(this.age - 1) }, 1000) } } user.getAge() // NaN
为什么是NaN
的呢?这个es5比较厉害的同学应该知道,首先是因为this.age是获取不到的,其次是因为在一个对象内的独立函数,而不是对象直接属性函数的话,这个时候this
指向的是window对象。
我们使用es6的箭头函数来改造一下:
const user = { name: 'Fea', age: 25, getAge: function () { setTimeout(() => { console.log(this.age - 1) }, 1000) } } user.getAge() // 24
这次可以正确执行这个函数,我们只是将延迟执行函数改造为es6形式,这个原因是es6的箭头函数中,this
是继承父极的this,所以它可以正确的知道我们要的this.age是user对象的age。
这个在我们进行需要调用父极this值的时候,会非常方便
那么这节课就是这么多啦,bye!~
本文系作者 @feacx 原创发布在 徐小鹏的个人分享。未经许可,禁止转载。