箭头函数

ES6 提供了一些处理 this 的新语法: “箭头函数”。箭头函数能使高阶函数更容易的工作。

新的“胖箭头”符号还可以用更简单的方式来定义匿名函数。

请看下面的例子:

  1. items.forEach(function(x) {
  2. console.log(x);
  3. incrementedItems.push(x+1);
  4. });

可以通过“箭头函数”改写如下形式:

  1. items.forEach((x) => {
  2. console.log(x);
  3. incrementedItems.push(x+1);
  4. });

计算一个表达式并返回值的函数可以被定义更简单:

  1. incrementedItems = items.map((x) => x+1);

下面代码与上面几乎等价:

  1. incrementedItems = items.map(function (x) {
  2. return x+1;
  3. });

但是箭头函数和一般函数有一个很重要的区别: 箭头函数不会产生自己作用域下的 this, arguments, supernew.target等对象。当this 在一个箭头函数内部使用时候,JavaScript 会使用函数所在上下文的 this 值。请看下面的例子:

  1. class Toppings {
  2. constructor(toppings) {
  3. this.toppings = Array.isArray(toppings) ? toppings : [];
  4. }
  5. outputList() {
  6. this.toppings.forEach(function(topping, i) {
  7. console.log(topping, i + '/' + this.toppings.length); // no this
  8. })
  9. }
  10. }
  11. var ctrl = new Toppings(['cheese', 'lettuce']);
  12. ctrl.outputList();

让我们在 http://jsbin.com 验证这段代码。不出所料,报错了,因为this 在匿名函数中的值是 undefined。

现在,让我们改变使用箭头函数的方式:

  1. class Toppings {
  2. constructor(toppings) {
  3. this.toppings = Array.isArray(toppings) ? toppings : [];
  4. }
  5. outputList() {
  6. this.toppings
  7. .forEach((topping, i) => console
  8. .log(topping, i + '/' + this.toppings.length) // `this` works!
  9. )
  10. }
  11. }
  12. var ctrl = new Toppings(['cheese', 'lettuce']);

这个箭头函数内部的 this 指向的是实例变量.

注意 箭头函数没有 arguments 对象 , 这会给开发者带来混乱. supernew.target 同样来自外部作用域。

译注

  • 箭头函数就是个简写形式的函数表达式;
  • 它拥有词法作用域的this值(即不会新产生自己作用域下的this, arguments, super 和 new.target 等对象);
  • 箭头函数总是匿名的。