react中的this指向问题

react中this指向问题

对于class来说,在class中定义的方法实际上绑定在类的原型中(prototype),我需要通过class的实例调用这个方法才能拿到实例的this

例如下方代码

class Person extends React.Component{
        constructor(props) {
            super(props);
            this.state = {
                name: props.name
            }
        }
        render(){
           return (
            <div onClick={this.sayHello}>123</div>
           ) 
        }
        sayHello() {
            console.log(this.state.name);
        }
    }
    ReactDOM.render(<Person name='张三'/>,document.getElementById('root'));

这样写是拿不到实例的this的,因为sayHello是作用onClick的回调,当我执行sayHello这个方法时 实际上不是通过实例来调用的 而是直接调用的方式

所以这个时候 sayHello中的this并不是实例,而是window或者undefined,有因为class中是默认执行了局部的严格模式,所以这个this为undefined

所以我们应该怎么办?

重写函数,把函数从实例的原型链上搬到实例本身

然后给这个函数通过bind绑定this

这样的话当onClick这个函数时，就会默认从实例本身寻找方法

所以我必须加上下方代码对sayHello方法进行绑定

this.sayHello = this.sayHello.bind(this)

这段代码的目的是将实例原型中的sayHello方法在实例本身中重写,并且这个方法中的this指向实例自己

打印实例,可以看到实例本身和原型都存在sayHello方法

在执行上述代码之前:

​ 通过onClick指定回调:

1. 先从实例上寻找名为sayHello的方法
2. 在实例中没有找到名为sayHello的方法,从实例的原型(_ proto _)中寻找
3. 在实例的原型中找到了这个方法,将其作为onClick的回调

​ 执行onClick方法:

1. 执行onClick的回调sayHello,sayHello开始执行
2. sayHello中存在this的调用,因为此时并不是实例调用,而是直接调用,相当于在全局中调用sayHello,所以this应该指向全局对象
3. 因为class中默认执行严格模式,所以此时this不指向全局对象，而是undefined

在执行上述代码之后:

通过onClick指定回调:

1. 先从实例上寻找名为sayHello的方法
2. 在实例中找到了名为sayHello的方法,将其作为onClick的回调

​ 执行onClick方法:

1. 执行onClick的回调sayHello,sayHello开始执行
2. sayHello中存在this的调用,因为此时并不是实例调用,而是直接调用,相当于在全局中调用sayHello,所以thisy应该指向全局对象
3. 但是sayHello已经经过我们的处理(bind),此时这个方法中的thi