es6之Arrow Function

本文系翻译文章，原文链接在此奉上Don’t Get Arrow Functions?

这篇文章主要向大家介绍何时以及如何使用es6的箭头函数。

---

1.一个quick example:

---

const addOne = function(n) {
    return n + 1;
}

使用箭头函数可以像这样：

const addOne = (n) => {
    return n + 1;
}

甚至更短可以像这样：

const addOne = (n) => n+1;

2.单个参数

如果函数中只有一个参数，那么可以这样：

// Turn this:
someCallBack((results) => {
    ...
})

// Into this:
someCallBack(results => {
    ...
})

但是如果没有参数，就不能省去（）了

someCallBack(() => {
    ...
})

3.Callbacks

箭头函数对于回调函数是很有用处的，大多数情况下，我们防止this的指向的问题，采用如下方式

..
var _this = this;
someCallBack(function() {
    _this.accessOuterScope();
})

使用arrow functions，我们得到一个作用域块，并且‘this’还是‘this’，不再需要通过额外的变量改变this指向，代码如下：

someCallBack(() => {
    this.accessOuterScope();
})

4.The “Wrapper”

假如在react一个情境中，我们通过点击事件调用doSomething(),并且要传递一个参数，如id。
这个例子不会起效：

const User = React.createClass(function() {
  render: function() {
    return <div onClick={doSomething(this.props.id)}>Some User</div>
  }
})

当页面加载完后，会立即调用doSomething(),解决这个问题，使用如下方式：

const User = React.createClass(function() {

  render: function() {
    return <div onClick={this.onClick}>Some User</div>
  },

  onClick: function() {
    doSomething(this.props.userId);
  }

})

使用箭头函数，我们可以这样写

const User = React.createClass(function() {
  render: function() {
    return <div onClick={() => doSomething(this.props.userId)}>Some User</div>
  }
})

如果我们不使用箭头函数，使用bind()也可以达到同样效果，如下：

const User = React.createClass(function() {
  render: function() {
    return <div onClick={doSomething.bind(null, this.props.userId)}>Some User</div>
  }
})

不过确实使用箭头函数可以方便许多，而且不用考虑太多其他问题呢！