对于class来说,在class中定义的方法实际上绑定在类的原型中(prototype),我需要通过class的实例调用这个方法才能拿到实例的this
例如下方代码
class Person extends React.Component{
constructor(props) {
super(props);
this.state = {
name: props.name
}
}
render(){
return (
123
)
}
sayHello() {
console.log(this.state.name);
}
}
ReactDOM.render( ,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指定回调:
sayHello
的方法sayHello
的方法,从实例的原型(_ proto _)中寻找 执行onClick方法:
onClick
的回调sayHello
,sayHello
开始执行sayHello
,所以this应该指向全局对象在执行上述代码之后:
通过onClick指定回调:
sayHello
的方法sayHello
的方法,将其作为onClick的回调 执行onClick方法:
onClick
的回调sayHello
,sayHello
开始执行sayHello
,所以thisy应该指向全局对象sayHello
已经经过我们的处理(bind),此时这个方法中的thi