ES6 系列之箭头函数

[yangtao2o]

ES6 系列之箭头函数

如果需要直接返回一个对象：

let func = (value, num) => ({ total: value * num });

与变量解构结合：

let func = ({ value, num }) => ({ total: value * num });

// 使用
var result = func({
  value: 10,
  num: 10
});

console.log(result); // {total: 100}

比如在 React 与 Immutable 的技术选型中，我们处理一个事件会这样做：

handleEvent = () => {
  this.setState({
    data: this.state.data.set("key", "value")
  });
};

其实就可以简化为：

handleEvent = () => {
  this.setState(({ data }) => ({
    data: data.set("key", "value")
  }));
};

比较一下箭头函数与普通函数主要区别包括：

1. 没有 this

箭头函数没有 this，所以需要通过查找作用域链来确定 this 的值。

这就意味着如果箭头函数被非箭头函数包含，this 绑定的就是最近一层非箭头函数的 this。

比如绑定一个事件：

// ES5
Button.prototype.bindEvent = function() {
  this.element.addEventListener("click", this.setBgColor.bind(this), false);
};

// ES6
Button.prototype.bindEvent = function() {
  this.element.addEventListener(
    "click",
    event => this.setBgColor(event),
    false
  );
};

由于箭头函数没有 this，所以会向外层查找 this 的值，即 bindEvent 中的 this，此时 this 指向实例对象，所以可以正确的调用 this.setBgColor 方法， 而 this.setBgColor 中的 this 也会正确指向实例对象。

最后，因为箭头函数没有 this，所以也不能用 call()、apply()、bind() 这些方法改变 this 的指向，可以看一个例子：

var value = 1;
var result = (() => this.value).bind({ value: 2 })();
console.log(result); // 1

2. 没有 arguments

箭头函数没有自己的 arguments 对象，可以通过命名参数或者 rest 参数的形式访问参数:

let nums = (...nums) => nums;
console.log(nums(1, 2, 3)); // [1, 2, 3]

3. 不能通过 new 关键字调用

JavaScript 函数有两个内部方法：[[Call]] 和 [[Construct]]。

当通过 new 调用函数时，执行 [[Construct]] 方法，创建一个实例对象，然后再执行函数体，将 this 绑定到实例上。

当直接调用的时候，执行 [[Call]] 方法，直接执行函数体。

箭头函数并没有 [[Construct]] 方法，不能被用作构造函数，如果通过 new 的方式调用，会报错。

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

由于不能使用 new 调用，也就没有了：

• 4.没有 new.target
• 5.没有原型
• 6.没有 super

总结：

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

那么什么是 non-method functions 呢？

我们先来看看 method 的定义：

A method is a function which is a property of an object.

对象属性中的函数就被称之为 method，那么 non-mehtod 就是指不被用作对象属性中的函数了，可是为什么说箭头函数更适合 non-method 呢？

让我们来看一个例子就明白了：

var obj = {
  i: 10,
  b: () => console.log(this.i, this), // method
  c: function() {
    // method
    console.log(this.i, this);
  }
};
obj.b(); // 由于箭头函数没有 this, 这里指向了 window
// undefined Window
obj.c();
// 10, Object {...}

原文链接：ES6 系列之箭头函数