关于react.js:搞懂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 实例，所以可能失常执行