Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

 

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

语法

基础语法

(param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression
         // equivalent to:  => { return expression; }

// 如果只有一个参数,圆括号是可选的:
(singleParam) => { statements }
singleParam => { statements }

// 无参数的函数需要使用圆括号:
() => { statements }

高级语法

// 返回对象字面量时应当用圆括号将其包起来:
params => ({foo: bar})

// 支持 Rest parametersdefault parameters:
(param1, param2, ...rest) => { statements }
(param1 = defaultValue1, param2, …, paramN = defaultValueN) => { statements }

// Destructuring within the parameter list is also supported
var f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
f();  // 6

详细的语法例子可以参考 这里

描述

另见 "ES6 In Depth: Arrow functions" on hacks.mozilla.org.

箭头函数的引入有两个方面的影响:一是更简短的函数书写,二是对 this 的词法解析

更短的函数

在一些函数式编程模式里,更短的函数书写方式很受欢迎。试比较:

var a = [
  "Hydrogen",
  "Helium",
  "Lithium",
  "Beryl­lium"
];

var a2 = a.map(function(s){ return s.length });

var a3 = a.map( s => s.length );

this 的词法

在箭头函数出现之前,每个新定义的函数都有其自己的  this 值(例如,构造函数的 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 对象,然后将该变量放到闭包中来解决。

function Person() {
  var self = this; // 也有人选择使用 `that` 而非 `self`. 
                   // 只要保证一致就好.
  self.age = 0;

  setInterval(function growUp() {
    // 回调里面的 `self` 变量就指向了期望的那个对象了
    self.age++;
  }, 1000);
}

除此之外,还可以使用 bind 函数,把期望的 this 值传递给 growUp() 函数。

箭头函数则会捕获其所在上下文的  this 值,作为自己的 this 值,因此下面的代码将如期运行。

function Person(){
  this.age = 0;

  setInterval(() => {
    this.age++; // |this| 正确地指向了 person 对象
  }, 1000);
}

var p = new Person();

与 strict mode 的关系

考虑到 this 是词法层面上的,严格模式中与 this 相关的规则都将被忽略。

var f = () => {'use strict'; return this};
f() === window; // 或全局对象

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

使用 call 或 apply 调用

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

var adder = {
  base : 1,
    
  add : function(a) {
    var f = v => v + this.base;
    return f(a);
  },

  addThruCall: function(a) {
    var f = v => v + this.base;
    var b = {
      base : 2
    };
            
    return f.call(b, a);
  }
};

console.log(adder.add(1));         // 输出 2
console.log(adder.addThruCall(1)); // 仍然输出 2(而不是3 ——译者注)

arguments 的词法

箭头函数不会在其内部暴露出  arguments 对象: arguments.lengtharguments[0]arguments[1] 等等,都不会指向箭头函数的 arguments,而是指向了箭头函数所在作用域的一个名为 arguments 的值(如果有的话,否则,就是 undefined。——译者注)。

var arguments = 42;
var arr = () => arguments;

arr(); // 42

function foo() {
  var f = () => arguments[0]; // foo's implicit arguments binding
  return f(2);
}

foo(1); // 1

箭头函数没有自己的 arguments 对象,不过在大多数情形下,rest参数可以给出一个解决方案:

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

foo(1); // 2

使用 yield 关键字

 yield 关键字通常不能在箭头函数中使用(except when permitted within functions further nested within it)。因此,箭头函数不能用作Generator函数。

返回对象字面量

请牢记,用 params => {object:literal} 这种简单的语法返回一个对象字面量是行不通的:

var func = () => {  foo: 1  };
// Calling func() returns undefined!

var func = () => {  foo: function() {}  };
// SyntaxError: function statement requires a name

这是因为花括号(即 {} )里面的代码被解析为声明序列了(例如, foo 被认为是一个 label, 而非对象字面量里的键)。

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

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

示例

// 一个空箭头函数,返回 undefined
let empty = () => {};

(() => "foobar")() // 返回 "foobar" 

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]

规范

Specification Status Comment
ECMAScript 2015 (6th Edition, ECMA-262)
Arrow Function Definitions
Standard Initial definition.
ECMAScript 2017 Draft (ECMA-262)
Arrow Function Definitions
Draft  

浏览器兼容性

Feature Chrome Firefox (Gecko) Edge IE Opera Safari
Basic support 45.0 22.0 (22.0) (Yes)

未实现

32 未实现
Feature Android Android Webview Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support 未实现 45.0 22.0 (22.0) 未实现 未实现 未实现 45.0

 

火狐规范注意事项

  • The initial implementation of arrow functions in Firefox made them automatically strict. This has been changed as of Firefox 24. The use of "use strict"; is now required.
  • Arrow functions are semantically different from the non-standard expression closures added in Firefox 3 (details: JavaScript 1.8), for expression closures do not bindthis lexically.
  • Prior to Firefox 39, a line terminator (\n) was incorrectly allowed after arrow function arguments. This has been fixed to conform to the ES6 specification and code like () \n => {} will now throw a SyntaxError in this and later versions.

相关链接

 

文档标签和贡献者

标签: 
 此页面的贡献者: Ovilia, solome, zilong-thu, jy1989, Ende93, teoli, ziyunfei
 最后编辑者: Ovilia,