ES2015入门系列3-箭头函数

2024年5月6日 151次阅读 来源: chekun

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

相信你也已控制箭头函数的用法了吧？迎接继承阅读下一章节。

    原文作者：chekun
    原文地址: https://segmentfault.com/a/1190000009970088
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞