ES6新函数！箭头函数有什么优势呢？

李玮

更短的函数

1. var elements = [
   
2.   'Hydrogen',
   
3.   'Helium',
   
4.   'Lithium',
   
5.   'Beryllium'
   
6. ];
   
7. 
   
8. elements.map(function(element) {
   
9.   return element.length;
   
10. }); // 返回数组：[8, 6, 7, 9]
    
11. 
    
12. // 上面的普通函数可以改写成如下的箭头函数
    
13. elements.map((element) => {
    
14.   return element.length;
    
15. }); // [8, 6, 7, 9]
    
16. 
    
17. // 当箭头函数只有一个参数时，可以省略参数的圆括号
    
18. elements.map(element => {
    
19. return element.length;
    
20. }); // [8, 6, 7, 9]
    
21. 
    
22. // 当箭头函数的函数体只有一个 `return` 语句时，可以省略 `return` 关键字和方法体的花括号
    
23. elements.map(element => element.length); // [8, 6, 7, 9]
    
24. 
    
25. // 在这个例子中，因为我们只需要 `length` 属性，所以可以使用参数解构
    
26. // 需要注意的是字符串 `"length"` 是我们想要获得的属性的名称，而 `lengthFooBArX` 则只是个变量名，
    
27. // 可以替换成任意合法的变量名
    
28. elements.map(({ "length": lengthFooBArX }) => lengthFooBArX); // [8, 6, 7, 9]

复制代码

没有单独的this

在箭头函数出现之前，每一个新函数根据它是被如何调用的来定义这个函数的this值：

• 如果是该函数是一个构造函数，this指针指向一个新的对象
• 在严格模式下的函数调用下，this指向[backcolor=rgba(220, 220, 220, 0.5)]undefined
• 如果是该函数是一个对象的方法，则它的this指针指向这个对象
• 等等
  

This被证明是令人厌烦的面向对象风格的编程。

1. function Person() {
   
2.   // Person() 构造函数定义 `this`作为它自己的实例.
   
3.   this.age = 0;
   
4. 
   
5.   setInterval(function growUp() {
   
6.     // 在非严格模式, growUp()函数定义 `this`作为全局对象,
   
7.     // 与在 Person()构造函数中定义的 `this`并不相同.
   
8.     this.age++;
   
9.   }, 1000);
   
10. }
    
11. 
    
12. var p = new Person();

复制代码

在ECMAScript 3/5中，通过将this值分配给封闭的变量，可以解决this问题。

1. function Person() {
   
2.   var that = this;
   
3.   that.age = 0;
   
4. 
   
5.   setInterval(function growUp() {
   
6.     //  回调引用的是`that`变量, 其值是预期的对象.
   
7.     that.age++;
   
8.   }, 1000);
   
9. }

复制代码

或者，可以创建绑定函数，以便将预先分配的this值传递到绑定的目标函数（上述示例中的growUp()函数）。

箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this。因此，在下面的代码中，传递给setInterval的函数内的this与封闭函数中的this值相同：

1. function Person(){
   
2.   this.age = 0;
   
3. 
   
4.   setInterval(() => {
   
5.     this.age++; // |this| 正确地指向 p 实例
   
6.   }, 1000);
   
7. }
   
8. 
   
9. var p = new Person();

复制代码

与严格模式的关系

鉴于 this 是词法层面上的，严格模式中与 this 相关的规则都将被忽略。

1. var f = () => { 'use strict'; return this; };
   
2. f() === window; // 或者 global

复制代码

严格模式的其他规则依然不变.

通过 call 或 apply 调用

由于 箭头函数没有自己的this指针，通过 call() 或 apply() 方法调用一个函数时，只能传递参数（不能绑定this---译者注），他们的第一个参数会被忽略。（这种现象对于bind方法同样成立---译者注）

1. var adder = {
   
2.   base : 1,
   
3.    
   
4.   add : function(a) {
   
5.     var f = v => v + this.base;
   
6.     return f(a);
   
7.   },
   
8. 
   
9.   addThruCall: function(a) {
   
10.     var f = v => v + this.base;
    
11.     var b = {
    
12.       base : 2
    
13.     };
    
14.             
    
15.     return f.call(b, a);
    
16.   }
    
17. };
    
18. 
    
19. console.log(adder.add(1));         // 输出 2
    
20. console.log(adder.addThruCall(1)); // 仍然输出 2
    
21. 不绑定arguments

复制代码