react中的this

Posted 2020-10-30 waiting-h

今天被问到了一个关于react中this指向的问题，脑子里大概有一些概念，但是一时又说不太清楚，之后查了一些资料，按照自己的理解总结一下

 

es6的class是可以用来构建react组件的一种方式，而我们在构建组件的时候其实就是创建类，这时候我们并没办法知道this的上下文，而其后组件被调用，其实就是实例化了一个对象，这时候，组件有上下文了，我们可以开始讨论this了

 

 1 import React from ‘react‘
 2 
 3 export default class MyComponent extends React.Component{
 4     constructor(props) {
 5         super(props)
 6         this.state = {
 7             name: ‘W‘
 8         }
 9         this.value = ‘www‘
10         this.handler1 = this.handler1.bind(this)
11     }
12     handler() {
13         console.log(this)
14     }
15     handler1() {
16         console.log(this)
17     }
18     handler2 = () => {
19         console.log(this)
20     }
21     componentDidMount() {
　　　　　　 console.log(‘***componentDidMount***: ‘,this)　
22         console.log(‘***componentDidMount this handler***: ‘,this.handler())
23         console.log(‘***componentDidMount this handler1***: ‘,this.handler1())
24         console.log(‘***componentDidMount this handler2***: ‘,this.handler2())
25     }
26     render() {
27         console.log(‘***render this***: ‘,this)
28         console.log(‘***render this handler***: ‘,this.handler())
29         console.log(‘***render this handler1***: ‘,this.handler1())
30         console.log(‘***render this handler2***: ‘,this.handler2())
31         return (
32             <div>
33                 <button onClick={this.handler}>click me</button>
34                 <button onClick={this.handler1}>click me</button>
35                 <button onClick={this.handler2}>click me</button>
36             </div>
37         )
38     }
39 }

首先，componentDidMount() 和 render()中的this输出的是该实例对象，以此类推，我们可以测试其他生命周期，最终会发现在构造函数等一系列生命周期中，我们调用的this都是指向实例对象的

其后，我们看到这里我定义了三个函数，而对三个函数调用的时候我们也是通过this来调用的，因为上面我们已经说过，这些情况下的this指向实例对象，而函数也是定义在实例对象里的
而关键的地方便是在函数内部的this，我们会发现handler函数无论是在生命周期中调用，还是在button中触发调用，this都是返回undefined。这是因为es6的class并没有帮助我们绑定函数的上下文，
所以在实例化的时候，handler()的上下文其实是button了，而我们想要的效果是让其绑定在MyComponent实例上
为了解决这个问题，我们必须手动来绑定，于是有了handler2，我们通过bind来将其上下文绑定到‘this’上，而这个‘this’我们之前验证过了，就是实例对象
当然，除了通过bind绑定，es6给我们提供了一个新的概念：箭头函数，它最大的特征便是把函数的this绑定到其定义时所在的上下文，而从代码中我们也可知，箭头函数便是被定义在类中，实例化的时候，其上下文自然是实例对象

通过一个this，这个问题里面还有讨论到class构建组件，组件实例化，箭头函数，bind绑定，都是需要了解并且值得深入的