React中使用ES6 class的this指向

因为 js non-arrow function 的 this 是 late binding 的,由调用者决定。这一点请看 js 高级程序设计第三版。http://www.zhihu.com/question/41377078/answer/90732483
■网友
return ( \u0026lt;div onClick={this.test2}\u0026gt;abc\u0026lt;/div\u0026gt; )这里只是把 test2 传给 onClick, 真正调用的时候(click event)并没有指定context.下面是一个更简单的例子var methods = { name1: "methods", test: function test() { console.log(this.name1); } };methods.test(); //output methodssetTimeout(methods.test, 1); //undefined
■网友
React.createClass有一个内置的魔术功能,可以自动绑定所有方法this。这对于在其他类中不用于此功能的JavaScript开发人员来说可能会有点混乱,或者当从React转到其他类时可能会令人困惑。因此,我们决定不将此内置到React的类模型中。如果需要,您仍然可以在构造函数中明确地预处理方法。 【React中使用ES6 class的this指向】 上面是react官方更新文档的说明。也就是说:在React.creatClass中,是react本身帮我们绑定了this,才让我们不用手动去绑定this就能正确得使用。如果react没有帮我们绑定this,这时候this是指向哪里的呢?我有看到博文说这里this本来是指向的生成的Dom节点的 div的支撑实例( backing instance )
当使用ES6的class语法来创建组件,react本身取消了这种帮我们自动绑定this的魔术功能,要使得this正确指向生成的实例组件,我们使用bind或者箭头函数:
如\u0026lt;div onClick={this.handleClick}\u0026gt;
this.handleClick = this.handleClick.bind(this); 我们在组件内部为handleClick绑定了this,所以调用this.handleClick的时候this是指向实例组件的,没毛病,老铁。 \u0026lt;div onClick={() =\u0026gt; this.handleClick()}\u0026gt; ;用箭头函数的方式调用this.handleClick(),箭头函数使得this被绑定在函数定义时的上下文,也就是指向实例组件,没毛病
■网友
this是指向调用者的
■网友
基本上,你把class当作function 的语法糖就可以了。


    推荐阅读