ES2015入门系列3-箭头函数
箭头函数(Arrows), 是用新的 => 语法书写的匿名函数, 如:
[1, 2, 3].map(n => n + 1);
等同于下面使用ES5的写法:
[1, 2, 3].map(function(n) {
return n + 1;
});
可能一开始无法接受,但慢慢的会发现箭头函数带来的快感不言而喻。作为一个PHP后端人士希望PHP也能支持该语法, 😄。
- 一般写法, 如计算两个数字之和, 并返回:
(arg1, arg2) => {
let arg3 = arg1 + arg2
return arg3
}
不用写function关键字, 但是上面的写法,也感觉不出来有多少简化,我们来看看几种情况:
- 如果只有一个参数,可以不用写括号
n => {
return n + 1
}
等价于
(n) => {
return n + 1
}
- 如果函数只有一行执行代码,可以省去花括号,写在一行
n => alert(n)
等价于
n => {
alert(n)
}
- 写在一行的时候,也可以省略return关键字
n => n + 1
等价于
n => {
return n + 1
}
- 没有参数的时候,则必须用**()**, 如
() => alert('ES2015 Rocks!');
语法介绍完毕,需要特别强调并指出的是:
**和用function关键字命名的函数不同的是,箭头函数体内和它的所在的块区域共享同一个this **, 举个例子:
直接在Chrome Console中运行以下代码:
class Zoo {
constructor(name, animals = []) {
this.name = name;
this.animals = animals;
}
list() {
this.animals.map(animal => {
console.log(this.name + '里有' + animal);
});
}
list2() {
this.animals.map(function() {
console.log(this.name + '里有' + animal);
});
}
}
let zoo = new Zoo('小红山动物园', ['大象', '猴子', '长颈鹿']);
zoo.list();
zoo.list2();
以上代码输出:
> 小红山动物园里有大象
> 小红山动物园里有猴子
> 小红山动物园里有长颈鹿
> Uncaught TypeError: Cannot read property 'name' of undefined(…)
这就是文档中所说的:
Unlike functions, arrows share the same lexical this as their surrounding code.
相信你也已经掌握箭头函数的用法了吧?欢迎继续浏览下一章节。