React与ES6系列：
- React与ES6（一）开篇介绍
- React和ES6（二）ES6的类和ES7的property initializer
- React与ES6（三）ES6类和方法绑定
- React与ES6（四）ES6如何处理React mixins
如果你看到前篇里CartItem的render方法里的这一句：{this.increaseQty.bind(this)}你可能会很意外为什么要bind。
如果把bind删掉的话会怎么样呢？会报错Uncaught TypeError: Cannot read property 'setState' of undeined。
这是因为this.increaseQty的this指向的不是类，而是undefined。ES6的类不支持自动绑定，不能像ES5那样。比如React.createClass()这样全部的内部方法都是自动绑定好了。
下面我们就看看ES6写的React组件类如何绑定内部方法。
方法一、使用Function.prototype.bind()
class CartItem extends React.Component {
render() {
return (
<p className="large-4 column">
<button onClick={this.increaseQty.bind(this)} className="button success">+</button>
<button onClick={this.decreaseQty.bind(this)} className="button alert">-</button>
</p>
);
}
}ES6的类本质就是Javascript方法，从Function的prototype里继承了bind()方法。所以当我们调用increaseQty()方法的时候，this指向了类的实例。你可以在MDN文档里看到更多。
方法二、使用在constructor里定义的方法
这是方法一和constructor的混合使用：
export default class CartItem extends React.Component {
constructor(props) {
super(props);
this.increaseQty = this.increaseQty.bind(this);
}
render() {
<button onClick={this.increaseQty} className="button success">+</button>
}
}这个方法就是把bind()方法从JSX定义里换到了类的constructor里。
方法三、使用箭头方法和构造函数
ES6的胖箭头方法被调用的时候保留了this指向的上下文。我们可以使用这一特性在构造函数里重新定义increaseQty()方法。
export default class CartItem extends React.Component {
constructor(props) {
super(props);
// this.state = {
// qty: props.initialQty,
// total: 0
// };
this._increaseQty = () => this.increaseQty();
}
render() {
<button onClick={_this.increaseQty} className="button success">+</button>
}
}方法四、使用胖箭头方法和ES2015的class property
export default class CartItem extends React.Component {
increaseQty = () => this.increaseQty();
render() {
<button onClick={this.increaseQty} className="button success">+</button>
}因此，类属性非常的简洁。
注意：类属性不是当前Javascript的标准，但是Babel已经支持这个功能（stage 0）。你可以看这里了解更多。
方法五、使用ES2015的方法绑定语法
Babel又加入了对一个语法糖的支持Function.prototype.bind()：::。这里就不介绍这个操作符是怎么工作的了。
export default class CartItem extends React.Component {
constructor(props) {
super(props);
this.increaseQty = ::this.increaseQty;
}
render() {
<button onClick={this.increaseQty} className="button success">+</button>
}
}最后
老外介绍的几个方法有点地方差别都不大，有的甚至只是调用的地方从constructor换到了JSX里。所以，有些就略去了，其他的可以看看。
欢迎加群互相学习，共同进步。QQ群：iOS: 58099570 | Android: 572064792 | Nodejs：329118122 做人要厚道，转载请注明出处！
本文转自张昺华-sky博客园博客，原文链接：http://www.cnblogs.com/sunshine-anycall/p/5888242.html
，如需转载请自行联系原作者
