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 的语法糖就可以了。
推荐阅读
- 『先进』长江流域最先进洗舱站在宁投运 油可分离回收,水能循环使用
- 汽车|冬天怎样让车内温度快速升高?座椅加热的最佳使用方式二,外循环的作用总结
- 汽车|迈凯伦Artura不再使用迈凯伦祖传V8引擎了?
- python的html5lib这个库咋使用啊我在网上也没有找到相关文档
- win7中本地连接跟无线网卡同时使用时是怎么样的模式
- 可不可能利用网盘的秒传功能使用伪造的MD5(或其他信息)值进行文件分享
- 为啥很多企业给用户发邮件会使用noreply/no-reply@xx.xx的邮箱
- win10激活的问题
- 全网通的mate8能不能插美国手机卡,在美国使用
- 汽车|首批200辆吉利新能源出租车在长交付使用,充电半小时电量可达80%
