为什么React事件处理函数必须使用Function.bind()绑定this？

我会带着你远行 2022-05-09 01:38 100阅读 0赞

转载自：[http://www.cnblogs.com/DM428/p/7777539.html][http_www.cnblogs.com_DM428_p_7777539.html]

最近在[React官网][React]学习[Handling Events][]这一章时，有一处不是很明白。代码如下：

class Toggle extends React.Component {
      constructor(props) {
        super(props);
        this.state = {isToggleOn: true};
    
        // This binding is necessary to make `this` work in the callback
        this.handleClick = this.handleClick.bind(this);
      }
    
      handleClick() {
        this.setState(prevState => ({
          isToggleOn: !prevState.isToggleOn
        }));
      }
    
      render() {
        return (
          <button onClick={this.handleClick}>
            {this.state.isToggleOn ? 'ON' : 'OFF'}
          </button>
        );
      }
    }
    
    ReactDOM.render(
      <Toggle />,
      document.getElementById('root')
    );

注意到在Toggle类的构造函数constructor类中，有一句注释：“This binding is necessary to make \`this\` work in the callback”，即在构造函数中，利用Function.bind()函数将类中已有的handleClick函数再次绑定了一下this。对于这个做法，官网给出的注释是：

![1098630-20171103113040185-254464229.png][]

这段话说了看似说了很多，其实就两点：

`1.如果你不绑定this.handleClick方法，那么在事件发生并且精确调用这个方法时，方法内部的this会丢失指向。 2.这不是React的原因，这是JavaScript中本来就有的。如果你传递一个函数名给一个变量，然后通过在变量后加括号()来调用这个方法，此时方法内部的this的指向就会丢失`

这一段点明了为什么要在构造函数中绑定this，因为JavaScript中确实有这么一个陷阱。具体是怎么样的呢？我进行了一下测试：

按 Ctrl+C 复制代码

为了便于为学习ES6的童鞋理解以及说明这是JavaScript中的陷阱而非React所特有，这里使用字面量表达式声明对象。

经过测试，这样使用obj中的testLog方法时，this指向obj，能够正常输出tmp属性：

![1098630-20171103114154998-451218681.png][]

现在修改一下代码：

按 Ctrl+C 复制代码

注意到现在没有直接调用obj对象中的testLog方法，而是使用了一个中间变量tmpLog过渡，当使用括号()调用该方法时，方法中的this丢失了指向，会指向window，进而window.tmp未定义就是undefined：

![1098630-20171103114402295-1659971939.png][]

![1098630-20171103114608951-559764877.png][]

说了这么多，跟React事件处理函数的绑定有什么关系呢？

前面讲过，React跟原生JavaScript的事件绑定区别有两点，其中第二点就是：![1098630-20171103114843670-566853081.png][]

即在React（或者说JSX）中，传递的事件参数不是一个字符串，而是一个实实在在的函数：

![1098630-20171103114949873-127174883.png][]

这样说，React中的事件名（上图中的onClick）就是我所举例子中的中间变量，React在事件发生时调用onClick，**由于onClick只是中间变量，所以处理函数中的this指向会丢失**，为了解决这个问题，我们需要在实例化对象的时候，需要在构造函数中绑定this，使得无论事件处理函数如何传递，它的this的指向都是固定的，固定指向我们所实例化的对象。

[http_www.cnblogs.com_DM428_p_7777539.html]: http://www.cnblogs.com/DM428/p/7777539.html
[React]: https://reactjs.org/
[Handling Events]: https://reactjs.org/docs/handling-events.html
[1098630-20171103113040185-254464229.png]: /images/20220509/b8cde9c3da854e4787d532bd0486d295.png
[1098630-20171103114154998-451218681.png]: /images/20220509/909357879ad644f59d22d062c580c1f7.png
[1098630-20171103114402295-1659971939.png]: /images/20220509/c121811f2c224f4e8f936c8ac2b52483.png
[1098630-20171103114608951-559764877.png]: /images/20220509/d35eed79816b4140aea7d663032da771.png
[1098630-20171103114843670-566853081.png]: /images/20220509/de3ea7e74c0e4467a21e96f4855d077b.png
[1098630-20171103114949873-127174883.png]: /images/20220509/42ff8317b6ef4b89b0bf5d786919651d.png