对于普通的类:
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
speak() {
console.log(this);
}
}
const p1 = new Person(’tom’, 18);
p1.speak(); // 通过实例调用speak方法
const speak = p1.speak;
speak(); // undefined,为什么不是window?——因为类中定义的方法,已经局部开启了strict
所以对于react组件:
// 这样的this就会报错
// 不是通过Weather实例调用了,是直接调用,且类中开启严格模式,this为undefined
class Weather extends React.Component {
constructor(props) {
super(props);
this.state = {isHot: false};
}
render() {
const {isHot} = this.state;
return <h1 onClick={this.changeWeather}>XXX</h1>
}
changeWeather() {
// changeWeather放在哪里?——放在Weather的原型对象,供实例使用
console.log(this);
}
}
即让changeWeather里面获取到Weather的实例对象:
// 构造器中的this就是Weather的实例对象
constructor(props) {
super(props);
this.state = {isHot: false};
// =左边的即自定义的一个同名函数,放到实例上;然后把右边的新函数赋值给左边(右边的changeWeather方法是原型上的方法)
this.changeWeather = this.changeWeather.bind(this); // 这个函数的this已 经指向了Weather实例对象
}
即:
class Weather extends React.Component {
constructor(props) {
super(props);
this.state = {isHot: false};
// 顺着原型链找到了原型对象上的changeWeather方法,调用.bind生成一个新的函数,并把函数中的this改为了Weather的实例对象,把新的函数挂载到了实例自身的demo函数上
this.demo = this.changeWeather.bind(this);
}
render() {
cosnt {isHot} = this.state;
return <h1 onClick={this.demo}>XXX</h1>
}
changeWeather() {
// changeWeather放在哪里?——放在Weather的原型对象,供实例使用
console.log(this);
}
}