搞懂react类组件中的this指向

this指向的规则

看两个点：

this定义在哪个函数中
该函数被谁调用

最终this就指向谁

JSX中的this指向

class Demo extends Component{
    state = {
        count: 0
    }
    handleClick = () => {
        this.setState({count: this.state.count+1})
    }
    render(){
        return(
            <>
              {this.state.count}
              
            
        )
    }
}

onClick={this.handleClick}中的this：

定义在哪个函数中
- 定义在render函数中
函数被谁调用：
- render函数被React调用，所以this指向React，又由于React做了一些设置，将this指向Demo类的实例，所以这里的this指向Demo类实例，所以this.handleClick就是 Demo实例.handleClick

Function函数中的this指向

class Demo extends Component{
    state = {
        count: 0
    }
    handleClick = function(){
        this.setState({count: this.state.count+1})
    }
    render(){
        return(
            <>
              {this.state.count}
              
            
        )
    }
}
// 点击按钮报错
// Cannot read properties of undefined (reading 'setState')

handleClick=function(){ this.setState...)中的this：

定义在哪个函数中：
- 定义在Demo类的handleClick函数中
函数被谁调用：
- onClick={this.handleClick}是将Demo.handleClick这个函数作为onclick事件的回调函数使用，回调函数执行时没有被调用者

js中，函数如果找不到调用者，最后就会在顶层对象中调用，也就是this会指向window对象，但由于使用了ES6语法，ES6语法默认采用严格模式，严格模式下，this不会指向window，而是undefined，所以才会报错。

箭头函数中的this指向

class Demo extends Component{
    state = {
        count: 0
    }
    handleClick = () => {
        this.setState({count: this.state.count+1})
    }
    render(){
        return(
            <>
              {this.state.count}
              
            
        )
    }
}
// 点击按钮正常

箭头函数中的this:

定义在哪个函数中：
- 定义在Demo类的handleClick函数中
函数被谁调用：
- onClick={this.handleClick}是将Demo.handleClick这个函数作为onclick事件的回调函数使用，回调函数执行时没有被调用者

虽然没有调用者，但由于使用了箭头函数，箭头函数内部的this就是定义时上层作用域的this，handleClick上层作用域是类的构造函数，那么handleClick的this就是构造函数的this，也就是指向Demo类的实例，所以能够正常执行

{()=>this.handleClick()}的this指向：

class Demo extends Component{
    state = {
        count: 0
    }
    handleClick = function (){
        this.setState({count: this.state.count+1})
    }
    render(){
        return(
            <>
              {this.state.count}
              
            
        )
    }
}
// 点击按钮正常

{()=>this.handleClick()}的this:

定义在哪个函数中：
- 定义在() => 箭头函数中，
该函数被谁调用：
- {() => this.handleClick()}整体作为onclick事件触发时的回调函数被调用

{()=> this.handleClick()}是定义在render函数中的，所以这个箭头函数内的this是指向Demo实例的，当onclick触发执行回调时，执行()=> this.handleClick()，内部又执行this.handleClick()，由于箭头函数内的this指向Demo实例，所以实际执行的就是Demo.handleClick()，此时handleClick方法是被Demo实例调用，所以handleClick内的this指向Demo实例，所以正常

.bind()方法的this指向

class Demo extends Component{
    state = {
        count: 0
    }
    handleClick = function (){
        this.setState({count: this.state.count+1})
    }
    render(){
        return(
            <>
              {this.state.count}
              
            
        )
    }
}
// 点击按钮正常

this.handleClick.bind(this)的this：
两个this都指向Demo实例，handleClick方法通过bind(this)，其内部的this也被指向了Demo实例，所以能够正常执行