ES5里，function内部的this默认为window，在严格模式下，this为undefined。ES5的写法React.createClass会自动绑定每个方法的this到当前组件实例，ES6的写法class XXX extends Component则不会自动为方法绑定this。
bind()方法会创建一个新函数，当这个新函数被调用时，它的this值是传递给bind()的第一个参数，它的参数是bind()的其它参数和原本参数，这个函数不论怎么调用都有同样的this，也就是当前类的实例，否则this为undefined。绑定this的几种方式：
```
// 方式一
<div onClick={this.handleClick.bind(this)}>save</div>
// 方式二
constructor() {
...
this.handleClick = this.handleClick.bind(this);
}
// 方式三
<div onClick={() => this.handleClick()}>save</div>
// 方式四
handleClik = () => {}
<div onClick={this.handleClick}>save</div>
// 方式五
ES6 Decorator,core-decorator.js提供了@autobind修饰器
```
方式一会在每次点击时通过bind创建一个新方法，一般使用方式二、方式三或方式四，其中方式三的箭头函数总是匿名的，如果打算移除监听事件可使用方式四。方式二在构造函数里绑定this后方法是属于实例的，而定义在类里的是非静态函数，在类的`prototype`上，实例的`__proto__`原型上。方式四使用箭头函数定义的方法也是这个效果。
网友评论