为什么react需要绑定this(2)-木庄网络博客

3. 绑定this的必要性

在组件上绑定事件监听器，是为了响应用户的交互动作，特定的交互动作触发事件时，监听函数中往往都需要操作组件某个状态的值，进而对用户的点击行为提供响应反馈，对开发者来说，这个函数触发的时候，就需要能够拿到这个组件专属的状态合集（例如在上面的开关组件ToggleButton例子中，它的内部状态属性state.isToggleOn的值就标记了这个按钮应该显示ON或者OFF），所以此处强制绑定监听器函数的this指向当前实例的也很容易理解。

React构造方法中的bind会将响应函数与这个组件Component进行绑定以确保在这个处理函数中使用this时可以时刻指向这一组件的实例。

4. 如果不绑定this

如果类定义中没有绑定this的指向,当用户的点击动作触发this.handleClick()这个方法时，实际上执行的是原型方法，可这样看起来并没有什么影响，如果当前组件的构造器中初始化了state这个属性，那么原型方法执行时，this.state会直接获取实例的state属性，如果构造其中没有初始化state这个属性（比如React中的UI组件），说明组件没有自身状态，此时即使调用原型方法似乎也没什么影响。

事实上的确是这样，这里的bind(this)所希望提前规避的，就是著名的this指针丢失的问题。

例如使用解构赋值的方式获取某个属性方法时，就会造成引用转换丢失this的问题:

1	`const` `toggleButton =` `new` `ToggleButton();`

1	`import {handleClick} = toggleButton;`

上例中解构赋值获取到的handleClick这个方法在执行时就会报错，Class的内部是强制运行在严格模式下的，此处的this在赋值中丢失了原有的指向，在运行时指向了undefined，而undefined是没有属性的。

另一个存在的限制，是没有绑定this的响应函数在异步运行时可能会出问题，当它作为回调函数被传入一个异步执行的方法时，同样会因为丢失了this的指向而引发错误。

如果没有强制指定组件实例方法的this，在将来的使用中就无法安心使用引用转换或作为回调函数传递这样的方式，对于后续使用和协作开发而言都是不方便的。

5. 小结

this的使用非常灵活，但这种灵活性也带来了很多混乱。这里的bind(this)是为了改进javascript语言级的缺陷，并不是只有React中才需要这样做，这个问题是伴随着面向对象编程而产生的，在使用javascript进行插件和框架的开发时，这个问题的影响会更加明显。之所以说它是一个语言级的缺陷，是因为Java中对于this在同样场景下的指向更符合正常思维逻辑，而javascript中如果不显示绑定，就会出现语言运行结果和方法的命名表意不一致的情况。