搞懂react类组件中的this指向

this指向的规则

看两个点：

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

最终this就指向谁

JSX中的this指向

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

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}
              <button onClick={this.handleClick}>按钮</button>
            </>
        )
    }
}
// 点击按钮报错
// 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}
              <button onClick={this.handleClick}>按钮</button>
            </>
        )
    }
}
// 点击按钮正常

箭头函数中的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}
              <button onClick={() => this.handleClick()}>按钮</button>
            </>
        )
    }
}
// 点击按钮正常

{()=>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}
              <button onClick={this.handleClick.bind(this)}>按钮</button>
            </>
        )
    }
}
// 点击按钮正常

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