摘要：使用箭頭函數(shù)和構(gòu)造函數(shù)當(dāng)方法被調(diào)用時，會保留上下文。我們能使用這個特征用下面的方法在構(gòu)造函數(shù)中重定義函數(shù)。在調(diào)用方法的方使用函數(shù)綁定語法你也可以直接在非構(gòu)造函數(shù)里面的里面直接使用函數(shù)綁定。

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

下面是所有系列文章章節(jié)的鏈接：

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},我們將在瀏覽器控制臺中發(fā)現(xiàn)如下錯誤：Uncaught TypeError: Cannot read property "setState" of undefined.

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

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.

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

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

之前我們已經(jīng)見到過：

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

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

此方法是上一個與類構(gòu)造函數(shù)的用法的混合：

export default class CartItem extends React.Component {

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

    render() {
        +
    }
}

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

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:

當(dāng)方法被調(diào)用時，ES6 fat arrow functions會保留上下文。我們能使用這個特征用下面的方法在構(gòu)造函數(shù)中重定義increaseQty()函數(shù)。

export default class CartItem extends React.Component {

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

    render() {
        +
    }
}

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

export default class CartItem extends React.Component {

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

    render() {
        +
    }
}

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

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

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

下面是ES2015+函數(shù)綁定的使用：

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() {
        +
    }
}

強調(diào)：這個特性是高度的實驗，使用它你得自己承擔(dān)風(fēng)險。

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

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

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

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

在這篇文章中，我們已經(jīng)發(fā)現(xiàn)了多種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