摘要：使用箭頭函數和構造函數當方法被調用時，會保留上下文。我們能使用這個特征用下面的方法在構造函數中重定義函數。在調用方法的方使用函數綁定語法你也可以直接在非構造函數里面的里面直接使用函數綁定。

這是React和ECMAScript6／ECMAScript7結合使用系列文章的第三篇。

下面是所有系列文章章節的鏈接：

React 、 ES6 - 介紹（第一部分）

React類、ES7屬性初始化（第二部分）

React類，方法綁定（第三部分）

ES6中React Mixins的使用（第四部分）

React 和ES6 之JSPM的使用（第五部分）

React 和 ES6 工作流之 Webpack的使用（第六部分）

本篇文章Github源碼

你在看上一篇文章中的CartItem render 方法中使用{this.increaseQty.bind(this)}代碼時，你肯定會覺得困惑。

如果我們嘗試將{this.increaseQty.bind(this)}代碼替換成{this.increaseQty},我們將在瀏覽器控制臺中發現如下錯誤：Uncaught TypeError: Cannot read property "setState" of undefined.

這是因為我們當我們調用一個用那種方法綁定的方法時，this不是類它本身，this未定義。相反，如果在案例中，React.createClass()所有的方法將會自動綁定對象的實例。這可能是一些開發者的直覺。

No autobinding was the decision of React team when they implemented support of ES6 classes for React components. You could find out more about reasons for doing so in this blog post.

當React team通過ES6來實現對React 組建的支持時，沒有設置自動綁定是React team的一個決定。在這篇博客中你能發現更多關于為什么這么處理的原因。

現在讓我們來看看在你的JSX案例中，使用ES6類創建的方法的多種調用方法。我所考慮到的多種不同的方法都在這個GitHub repository。

之前我們已經見到過：

export default class CartItem extends React.Component {
    render() {
        +
    }
}

當任何ES6的常規方法在方法原型中進行this綁定時，this指向的是類實例。如果你想了解更多Function.prototype.bind(),你可以訪問這篇MDN博客

此方法是上一個與類構造函數的用法的混合：

export default class CartItem extends React.Component {

    constructor(props) {
        super(props);
        this.increaseQty = this.increaseQty.bind(this);
    }

    render() {
        +
    }
}

你不要再次在JSX代碼的其它地方進行綁定，但是這將增加構造函數中的代碼量。

ES6 fat arrow functions preserve this context when they are called. We could use this feature and redefine increaseQty() inside constructor in the following way:

當方法被調用時，ES6 fat arrow functions會保留上下文。我們能使用這個特征用下面的方法在構造函數中重定義increaseQty()函數。

export default class CartItem extends React.Component {

    constructor(props) {
        super(props);
        this._increaseQty = () => this.increaseQty();
    }

    render() {
        +
    }
}

另外，你可以使用ES2015+類屬性語法和箭頭函數：

export default class CartItem extends React.Component {

    increaseQty = () => this.increaseQty();

    render() {
        +
    }
}

屬性初始化和Method 3中的功能一樣。

警告: 類屬性還不是當前JavaScript標準的一部分。但是你可以在Babel中自由的使用他們。你可以在這篇文章中了解更多類屬性的使用。

最近，Babel介紹了Function.prototype.bind()中::的使用。在這里我就不深入細節講解它工作的原理。有很多其它的小伙伴已經有很完美的解釋。你可以Google搜索blog 2015 function bind了解更多細節。

下面是ES2015+函數綁定的使用：

export default class CartItem extends React.Component {

    constructor(props) {
        super(props);
        this.increaseQty = ::this.increaseQty;
        // line above is an equivalent to this.increaseQty = this.increaseQty.bind(this);
    }

    render() {
        +
    }
}

強調：這個特性是高度的實驗，使用它你得自己承擔風險。

You also have a possibility to use ES2015+ function bind syntax directly in your JSX without touching constructor. It will look like:

你也可以直接在非構造函數里面的JSX里面直接使用ES2015+函數綁定。效果如下：

export default class CartItem extends React.Component {
    render() {
        +
    }
}

非常簡潔，唯一的缺點是，這個函數將在每個后續渲染組件上重新創建。這不是最佳的。更重要的是，如果你使用像PureRenderMixin的東西將會出現。

在這篇文章中，我們已經發現了多種React組建類方法的綁定方法。

About autobinding in official React blog

Autobinding, React and ES6 Classes

Function Bind Syntax in official Babel blog

Function.prototype.bind()

Experimental ES7 Class Properties

Experimental ES7 Function Bind Syntax