[乐意黎转载]JS中的箭头函数

旧城等待， 2022-05-28 08:59 252阅读 0赞

箭头函数表达式的语法比[函数表达式][Link 1]更短，并且不绑定自己的[this][]，[arguments][]，[super][]或 [new.target][]。这些函数表达式最适合用于非方法函数，并且它们不能用作构造函数。

## 语法 ##

> ### 基础语法 ###
> 
>     (参数1, 参数2, …, 参数N) => {  函数声明 }
>     (参数1, 参数2, …, 参数N) => 表达式（单一）
>     //相当于：(参数1, 参数2, …, 参数N) =>{ return 表达式; }
>     
>     // 当只有一个参数时，圆括号是可选的：
>     (单一参数) => { 函数声明}
>     单一参数 => { 函数声明}
>     
>     // 没有参数的函数应该写成一对圆括号。
>     () => { 函数声明}

### 高级语法 ###

>     //加括号的函数体返回对象字面表达式：
>     参数=> ({ foo: bar})
>     
>     //支持剩余参数和默认参数
>     (参数1, 参数2, ...rest) => { 函数声明}
>     (参数1 = 默认值1,参数2, …, 参数N = 默认值N) => { 函数声明}
>     
>     //同样支持参数列表解构
>     let f = ([a, b] = [1, 2], { x: c} = { x: a + b}) => a + b + c;
>     f();  // 6

## 描述 ##

参考 ["ES6 In Depth: Arrow functions" on hacks.mozilla.org][ES6 In Depth_ Arrow functions_ on hacks.mozilla.org].

引入箭头函数有两个方面的作用：更简短的函数并且不绑定`this`。

### 更短的函数 ###

var materials = [
      'Hydrogen',
      'Helium',
      'Lithium',
      'Beryllium'
    ];
    
    materials.map(function(material) {  
      return material.length; 
    }); // [8, 6, 7, 9]
    
    materials.map((material) => { 
      return material.length;
    }); // [8, 6, 7, 9]
    
    materials.map(material => material.length); // [8, 6, 7, 9]定this

在箭头函数出现之前，每个新定义的函数都有它自己的 `this`值（在构造函数的情况下是一个新对象，在严格模式的函数调用中为 undefined，如果该函数被称为“对象方法”则为基础对象等）。`This`被证明是令人厌烦的面向对象风格的编程。

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

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

function Person() { 
      var that = this;
      that.age = 0;
    
      setInterval(function growUp() { 
        // 回调引用的是`that`变量, 其值是预期的对象. 
        that.age++;
      }, 1000);
    }

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

箭头函数不会创建自己的`this`；它使用封闭执行上下文的`this`值。因此，在下面的代码中，传递给`setInterval`的函数内的`this`与封闭函数中的`this`值相同：

function Person(){ 
      this.age = 0;
    
      setInterval(() => { 
        this.age++; // |this| 正确地指向person 对象
      }, 1000);
    }
    
    var p = new Person();

与严格模式的关系

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

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

通过 call 或 apply 调用

由于 `this` 已经在词法层面完成了绑定，通过 `call()` 或 `apply()` 方法调用一个函数时，只是传入了参数而已，对 `this` 并没有什么影响：

### 不绑定`arguments` ###

箭头函数不绑定[Arguments 对象][arguments]。因此，在本示例中，参数只是在封闭范围内引用相同的名称：

var arguments = 42;
    var arr = () => arguments;
    
    arr(); // 42
    
    function foo() { 
      var f = (i) => arguments[0]+i; 
      // foo函数的间接参数绑定
      return f(2);
    }
    
    foo(1); // 3

在大多数情况下，使用[剩余参数][Link 4]是使用`arguments`对象的好选择。

function foo() {  
      var f = (...args) => args[0]; 
      return f(2); 
    }
    
    foo(1); 
    // 2

### 像方法一样使用箭头函数 ###

如上所述，箭头函数表达式对非方法函数是最合适的。让我们看看当我们试着把它们作为方法时发生了什么。

'use strict';
    var obj = { 
      i: 10,
      b: () => console.log(this.i, this),
      c: function() { 
        console.log( this.i, this)
      }
    }
    obj.b(); 
    // undefined
    obj.c(); 
    // 10, Object {...}

箭头函数没有定义this绑定。另一个涉及[`Object.defineProperty()`][Object.defineProperty]的示例：

'use strict';
    var obj = { 
      a: 10
    };
    
    Object.defineProperty(obj, "b", { 
      get: () => { 
        console.log(this.a, typeof this.a, this);
        return this.a+10; 
       // 代表全局对象 'Window', 因此 'this.a' 返回 'undefined'
      }
    });

### 使用 `new` 操作符 ###

箭头函数不能用作构造器，和 `new`一起用会抛出错误。

var Foo = () => { };
    var foo = new Foo(); // TypeError: Foo is not a constructor

### 使用`prototype`属性 ###

箭头函数没有`prototype`属性。

var Foo = () => { };
    console.log(Foo.prototype); // undefined

### 使用 `yield` 关键字 ###

`yield` 关键字通常不能在箭头函数中使用（除非是嵌套在允许使用的函数内）。因此，箭头函数不能用作生成器。

## 函数体 ##

箭头函数可以有一个“简写体”或常见的“块体”。

在一个简写体中，只需要一个表达式，并附加一个隐式的返回值。在块体中，必须使用明确的`return`语句。

var func = x => x * x;                  
    // 简写函数 省略return
    
    var func = (x, y) => {  return x + y; }; 
    //常规编写 明确的返回值

## 返回对象字面量 ##

记住用`params => {object:literal}`这种简单的语法返回对象字面量是行不通的。

var func = () => {  foo: 1 };               
    // Calling func() returns undefined!
    
    var func = () => {  foo: function() { } };   
    // SyntaxError: function statement requires a name

这是因为花括号（`{}` ）里面的代码被解析为一系列语句（即 `foo` 被认为是一个标签，而非对象字面量的组成部分）。

所以，记得用圆括号把对象字面量包起来：

var func = () => ({ foo: 1});

## 换行 ##

箭头函数在参数和箭头之间不能换行。

var func = ()
               => 1; 
    // SyntaxError: expected expression, got '=>'

## 解析顺序 ##

虽然箭头函数中的箭头不是运算符，但箭头函数具有与常规函数不同的特殊[运算符优先级][Link 5]解析规则。

let callback;
    
    callback = callback || function() { }; // ok
    
    callback = callback || () => { };      
    // SyntaxError: invalid arrow-function arguments
    
    callback = callback || (() => { });    // ok

## 更多示例 ##

// 空的箭头函数返回 undefined
    let empty = () => { };
    
    (() => 'foobar')(); 
    // Returns "foobar"
    // (这是一个立即执行函数表达式,可参阅 'IIFE'术语表) 
    
    
    var simple = a => a > 15 ? 15 : a; 
    simple(16); // 15
    simple(10); // 10
    
    let max = (a, b) => a > b ? a : b;
    
    // Easy array filtering, mapping, ...
    
    var arr = [5, 6, 13, 0, 1, 18, 23];
    
    var sum = arr.reduce((a, b) => a + b);  
    // 66
    
    var even = arr.filter(v => v % 2 == 0); 
    // [6, 0, 18]
    
    var double = arr.map(v => v * 2);       
    // [10, 12, 26, 0, 2, 36, 46]
    
    // 更简明的promise链
    promise.then(a => { 
      // ...
    }).then(b => { 
      // ...
    });
    
    // 无参数箭头函数在视觉上容易分析
    setTimeout( () => { 
      console.log('I happen sooner');
      setTimeout( () => { 
        // deeper code
        console.log('I happen later');
      }, 1);
    }, 1);

箭头函数也可以使用条件（三元）运算符：

var simple = a => a > 15 ? 15 : a;
    simple(16); // 15
    simple(10); // 10
    
    let max = (a, b) => a > b ? a : b;

>  
> 
> 箭头函数内定义的变量及其作用域

// 常规写法
    var greeting = () => { let now = new Date(); return ("Good" + ((now.getHours() > 17) ? " evening." : " day."));}
    greeting();          //"Good day."
    console.log(now);    // ReferenceError: now is not defined 标准的let作用域
    
    // 参数括号内定义的变量是局部变量（默认参数）
    var greeting = (now=new Date()) => "Good" + (now.getHours() > 17 ? " evening." : " day.");
    greeting();          //"Good day."
    console.log(now);    // ReferenceError: now is not defined
    
    // 对比：函数体内{}不使用var定义的变量是全局变量
    var greeting = () => { now = new Date(); return ("Good" + ((now.getHours() > 17) ? " evening." : " day."));}
    greeting();           //"Good day."
    console.log(now);     // Fri Dec 22 2017 10:01:00 GMT+0800 (中国标准时间)
    
    // 对比：函数体内{} 用var定义的变量是局部变量
    var greeting = () => { var now = new Date(); return ("Good" + ((now.getHours() > 17) ? " evening." : " day."));}
    greeting(); //"Good day."
    console.log(now);    // ReferenceError: now is not defined

>  
> 
> 箭头函数也可以使用闭包：

// 标准的闭包函数
    function A(){ 
          var i=0;
          return function b(){ 
                  return (++i);
          };
    };
    
    var v=A();
    v();    //1
    v();    //2
    
    
    //箭头函数体的闭包（ i=0 是默认参数）
    var Add = (i=0) => { return (() => (++i) )};
    var v = Add();
    v();           //1
    v();           //2
    
    //因为仅有一个返回，return 及括号（）也可以省略
    var Add = (i=0)=> ()=> (++i);

>  箭头函数递归

var fact = (x) => ( x==0 ?  1 : x*fact(x-1) );
    fact(5);       // 120

规范

<table style="margin-left:0px;"> 
 <tbody> 
  <tr> 
   <th style="border-color:#ffffff #ffffff #d4dde4;">Specification</th> 
   <th style="border-color:#ffffff #ffffff #d4dde4;">Status</th> 
   <th style="border-color:#ffffff #ffffff #d4dde4;">Comment</th> 
  </tr> 
  <tr> 
   <td style="border-color:#ffffff;"><a href="https://www.ecma-international.org/ecma-262/6.0/#sec-arrow-function-definitions" rel="nofollow">ECMAScript 2015 (6th Edition, ECMA-262)<br> Arrow Function Definitions</a></td> 
   <td style="border-color:#ffffff;"><span style="color:#00539f;">Standard</span></td> 
   <td style="border-color:#ffffff;">Initial definition.</td> 
  </tr> 
  <tr> 
   <td style="border-color:#ffffff;"><a href="https://tc39.github.io/ecma262/#sec-arrow-function-definitions" rel="nofollow">ECMAScript Latest Draft (ECMA-262)<br> Arrow Function Definitions</a></td> 
   <td style="border-color:#ffffff;"><span style="color:#e66e33;">Draft</span></td> 
   <td style="border-color:#ffffff;">&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

## 浏览器兼容 ##

[新的兼容性表格正在测试中 ][Link 6]

<table style="margin-left:0px;"> 
 <thead> 
  <tr> 
   <td style="text-align:center;width:200px;">&nbsp;</td> 
   <th colspan="6" style="text-align:center;">Desktop</th> 
   <th colspan="7" style="text-align:center;">Mobile</th> 
   <th colspan="1" style="text-align:center;">Server</th> 
  </tr> 
  <tr> 
   <td style="text-align:center;width:200px;">&nbsp;</td> 
   <th style="text-align:center;width:50px;">Chrome</th> 
   <th style="text-align:center;width:50px;">Edge</th> 
   <th style="text-align:center;width:50px;">Firefox</th> 
   <th style="text-align:center;width:50px;">Internet Explorer</th> 
   <th style="text-align:center;width:50px;">Opera</th> 
   <th style="text-align:center;width:50px;">Safari</th> 
   <th style="text-align:center;width:51px;">Android webview</th> 
   <th style="text-align:center;width:51px;">Chrome for Android</th> 
   <th style="text-align:center;width:51px;">Edge Mobile</th> 
   <th style="text-align:center;width:51px;">Firefox for Android</th> 
   <th style="text-align:center;width:51px;">Opera for Android</th> 
   <th style="text-align:center;width:51px;">iOS Safari</th> 
   <th style="text-align:center;width:51px;">Samsung Internet</th> 
   <th style="text-align:center;width:51px;">Node.js</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <th style="width:200px;">Basic support</th> 
   <td style="text-align:center;width:50px;">Full support45</td> 
   <td style="text-align:center;width:50px;">Full supportYes</td> 
   <td style="text-align:center;width:50px;">Full support22 <p>Notes</p> 打开</td> 
   <td style="text-align:center;width:50px;">No supportNo</td> 
   <td style="text-align:center;width:50px;">Full support32</td> 
   <td style="text-align:center;width:50px;">Full support10</td> 
   <td style="text-align:center;width:51px;">Full support45</td> 
   <td style="text-align:center;width:51px;">Full support45</td> 
   <td style="text-align:center;width:51px;">Full supportYes</td> 
   <td style="text-align:center;width:51px;">Full support22 <p>Notes</p> 打开</td> 
   <td style="text-align:center;width:51px;">Full support32</td> 
   <td style="text-align:center;width:51px;">Full support10</td> 
   <td style="text-align:center;width:51px;">?</td> 
   <td style="text-align:center;width:51px;">Full supportYes</td> 
  </tr> 
  <tr> 
   <th style="width:200px;">Trailing comma in parameters</th> 
   <td style="text-align:center;width:50px;">Full support58</td> 
   <td style="text-align:center;width:50px;">?</td> 
   <td style="text-align:center;width:50px;">Full support52</td> 
   <td style="text-align:center;width:50px;">No supportNo</td> 
   <td style="text-align:center;width:50px;">Full support45</td> 
   <td style="text-align:center;width:50px;">?</td> 
   <td style="text-align:center;width:51px;">Full support58</td> 
   <td style="text-align:center;width:51px;">Full support58</td> 
   <td style="text-align:center;width:51px;">?</td> 
   <td style="text-align:center;width:51px;">Full support52</td> 
   <td style="text-align:center;width:51px;">Full support45</td> 
   <td style="text-align:center;width:51px;">?</td> 
   <td style="text-align:center;width:51px;">?</td> 
   <td style="text-align:center;width:51px;">Full supportYes</td> 
  </tr> 
 </tbody> 
</table>

### Legend ###

Full support

No support

Compatibility unknown

See implementation notes.

## 相关链接 ##

*  ["ES6 In Depth: Arrow functions" on hacks.mozilla.org][ES6 In Depth_ Arrow functions_ on hacks.mozilla.org]

原文地址:    
[https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow\_functions][https_developer.mozilla.org_zh-CN_docs_Web_JavaScript_Reference_Functions_Arrow_functions]

[Link 1]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/function
[this]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/this
[arguments]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/arguments
[super]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/super
[new.target]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/new.target
[ES6 In Depth_ Arrow functions_ on hacks.mozilla.org]: https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/
[Link 2]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
[Link 3]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Strict_mode
[Link 4]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Rest_parameters
[Object.defineProperty]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
[Link 5]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Operator_Precedence
[Link 6]: https://developer.mozilla.org/docs/New_Compatibility_Tables_Beta
[https_developer.mozilla.org_zh-CN_docs_Web_JavaScript_Reference_Functions_Arrow_functions]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions