关于react.js:搞懂react类组件中的this指向

看两个点：

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

最终 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

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，所以才会报错。

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 类的实例，所以可能失常执行

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 实例，所以失常

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 实例，所以可能失常执行

关于react.js:搞懂react类组件中的this指向

this 指向的规定

JSX 中的 this 指向

Function 函数中的 this 指向

箭头函数中的 this 指向

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

.bind() 办法的 this 指向