Reactjs组件中的方法为什么绑定this?
前言:Reactjs中的定义的方法其实是基于实例的原型方法;es6默认严格模式
问题:在Reactjs组件中写入以下代码,那么执行结果会是什么呢?
![](https://cdn.nlark.com/lark/0/2018/png/99254/1543846261566-3fbc049f-506b-4599-8b04-6197c2c50a1c.png)
![](https://cdn.nlark.com/lark/0/2018/png/99254/1543846413051-2b5cb261-03ae-4bec-b532-23b805b9a2da.png)
···
结果是这样的:
![](https://cdn.nlark.com/lark/0/2018/png/99254/1543846484857-852100ac-a304-4c3a-88f6-d20c87ed8269.png)
对的,你没看错,不是dom元素,也不是window,更不是组件实例。
场景一:
![](https://cdn.nlark.com/lark/0/2018/png/99254/1543846661870-816869e8-d801-4e53-8a92-91f869b14f27.png)
场景二:
![](https://cdn.nlark.com/lark/0/2018/png/99254/1543846717513-952d30fa-be48-48d5-9a22-46fb58534218.png)
场景三:
![](https://cdn.nlark.com/lark/0/2018/png/99254/1543846883084-df7fede5-5a99-442a-a07e-5174ad4a8d1b.png)
场景四:
![](https://cdn.nlark.com/lark/0/2018/png/99254/1543846975015-95555e3a-03a0-4d0c-a5d4-dba1d2261af2.png)
场景五:原生dom事件监听
-
当代码被内联处理函数调用时,它的this指向监听器所在的DOM元素
-
当代码被包括在函数内部执行时,在非严格模式指向全局对象window, 在严格模式指向undefined
总结:
-
在Reactjs不绑定this,就会出现场景三的现象。
-
为了保证方法内部this始终指向当前实例,建议绑定this,如场景四。