搞懂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} ) } }

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} ) } } // 点击按钮正常

【搞懂react类组件中的this指向】{()=>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实例,所以能够正常执行

    推荐阅读