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>
  }
})

不過確實使用箭頭函數可以方便許多，而且不用考慮太多其他問題呢！