ES2015入门系列3-箭头函数

May 23, 2016

箭头函数(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.

相信你也已经掌握箭头函数的用法了吧？欢迎继续浏览下一章节。