React类中方法的this指向

对于普通的类：

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);
    }
}