likes
comments
collection
share

搞懂react类组件中的this指向

作者站长头像
站长
· 阅读数 25

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实例,所以能够正常执行

转载自:https://segmentfault.com/a/1190000042112188
评论
请登录