ES6 箭头函数

最后更新：
阅读次数： 次
许可协议： 知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议

ES6 允许使用箭头 => 定义函数。

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

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

箭头函数的语法

下面是 MDN 上箭头函数的基础语法和高级语法，以及一些示例。

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

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

// 无参数的函数需要使用圆括号:
() => { statements }
// 高级语法
// 返回对象字面量时应当用圆括号将其包起来:
params => ({foo: bar})

// 支持 Rest parameters 和 default 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
// 箭头函数写法
var f = v => v;

// 传统写法
var f = function(v) {
  return v;
};
var f = () => 5;
// 等同于
var f = function() {
  return 5;
};

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
  return num1 + num2;
};
// 箭头函数返回对象字面量时应当用圆括号将其包起来
var f = (name, age) => ({ name: name, age: age });
console.log(f("percy", 20)); // Object {name: "percy", age: 20}

箭头函数的特点

  • 箭头函数不绑定 this 值

在箭头函数出现之前，每个新定义的函数都有其自己的 this 值（例如，构造函数的 this 指向了一个新的对象；严格模式下的函数的 this 值为 undefined；如果函数是作为对象的方法被调用的，则其 this 指向了那个调用它的对象）。

箭头函数则会捕获其所在上下文的 this 值，作为自己的 this 值。

// 这里我们用闭包来举例

// 传统写法，闭包中的 this 值的问题
var name = "The Window";
var obj = {
  name: "My Object",

  getName: function() {
    return function() {
      return this.name;
    };
  }
};
console.log(obj.getName()()); // The Window

// 传统写法，解决方法
var name = "The Window";
var obj = {
  name: "My Object",

  getName: function() {
    var that = this;
    return function() {
      return that.name;
    };
  }
};
console.log(obj.getName()()); // My Object

// 箭头函数写法
var name = "The Window";
var obj = {
  name: "My Object",
  getName: function() {
    return () => this.name;
  }
};
console.log(obj.getName()()); // My Object

再举一个简单的例子。

let obj = {
  who: "percy",
  fun1: () => {
    console.log(`this.who = ${this.who}, this = ${this}`);
  },
  fun2: function() {
    console.log(`this.who = ${this.who}, this = ${this}`);
  }
};

obj.fun1(); // this.who = undefined, this = [object Window]
obj.fun2(); // this.who = percy, this = [object Object]

由于箭头函数没有自己的 this，所以当然也就不能用 call()、apply()、bind() 这些方法去改变 this 的指向。

  • 不绑定 arguments 对象

箭头函数没有自己的 arguments 对象，不过在大多数情形下，可以使用函数的 rest 参数来代替实现 arguments 对象的功能。

function f1(a, b, c) {
  var fun = (a, b) => {
    console.log(arguments.length);
  };
  console.log(arguments.length);
  fun(a, b);
}
f1(1, 5, 9); // 打印两个 3
  • 箭头函数不能用作构造器
let f1 = function(name) {
  return name;
};
let f2 = age => age;

console.log(new f1("percy")); // f1 {}
console.log(new f2(20)); // Uncaught TypeError: f2 is not a constructor
  • 箭头函数不能用作 Generator 函数

好了，就这些了，以后遇上别的用法，补！

参考资料