前言
箭头函数不仅仅是编写简洁代码的”捷径”。它还具有非常特殊且有用的特性。
JavaScript 充满了我们需要编写在其他地方执行的小函数的情况。
例如：
arr.forEach(func)——forEach对每个数组元素都执行funcsetTimeout(func)——func由内建调度器执行。
JavaScript 的精髓在于创建一个函数并将其传递到某个地方。
_在这样的函数中，我们通常不想离开当前上下文_。这就是箭头函数的主战场。
箭头函数没有”this”
箭头函数没有 this。如果访问 this，则会从外部获取。
例如，我们可以使用它在对象方法内部进行迭代：
1 | let group = { |
2 | title: 'Our Group', |
3 | students: ['Johon', 'Peter', 'Alice'], |
4 | |
5 | showList() { |
6 | this.students.forEach(student => console.log(this.title + '：' + student)) |
7 | } |
8 | } |
9 | |
10 | group.showList() |
这里 forEach 中使用了箭头函数，所以其中的 this.title 其实和外部方法 showList 的完全一样。那就是 group.title。
不能对箭头函数进行 new 操作
不具有this 自然也就意味着另一个限制：箭头函数不能用作构造函数。不能用 new 调用他们。
箭头函数也没有 arguments 变量
1 | let demoFunc = () => { |
2 | console.log(arguments) // 报错的 |
3 | } |
但是可以以下操作，来获取 arguments 使用它
1 | function defer(f, ms) { |
2 | return function() { |
3 | setTimeout(() => f.apply(this, arguments), ms) |
4 | } |
5 | } |
6 | |
7 | function sayHi(who) { |
8 | console.log('Hello, ' + who) |
9 | } |
10 | |
11 | let sayHiDeferred = defer(sayHi, 2000) |
12 | sayHiDeferred('Johon') // 两秒后显示 |
不使用箭头函数的话，可以这么写：
1 | function defer(f, ms) { |
2 | let ctx = this |
3 | setTimeout(function() { |
4 | return f.apply(ctx, args) |
5 | }, ms) |
6 | } |
在这里，我们必须创建额外的变量 args 和 ctx，以便 setTimeout 内部的函数可以获取它们。
总结
箭头函数：
- 没有 this
- 没有 arguments
- 不能使用 new 进行调用
- 它们也没有 super
这是因为，箭头函数是针对那些对自己的“上下文”，但在当前上下文中起作用的短代码的。