你知道为什么类组件的实例拥有类的箭头函数方法，却没有普通函数方法吗？今天全懂。-一一网

欲诚其意者，先致其知，致知在格物。物格而后知至，知至而后意诚，意诚而后心正，心正而后身修，身修而后家齐，家齐而后国治，国治而后天下平。– 礼记-大学。

就像这句哲理一样我可能并不知道其意思，但我觉得他读起来就很不平凡。
我相信终有一天，通过别的渠道，或者悟道，我终究会明白它。

正题

最早出现这个问题是，写类组件的时候，给按钮绑定点击事件，两种写法开始的。


import React,{Component} from 'react'

class Test extends Component{

  constructor(props){
    super(props);
    this.state = {
      name: '1',
      age: 20
    }
  }

  // 普通函数
  getName(){
    console.log(this?.state?.name,this,'getName')
  }
  // 箭头函数

  getAge = () => {
    console.log(this?.state?.age,this,'getAge')
  }

  render(){
    console.log(this,'render')
    return(
      <>
        <button onClick={this.getName}>获取名称</button>
        <button onClick={this.getAge}>获取年龄</button>
      </>
    )

  }

}

export default Test;
    
复制代码

图1

render

图2

点击获取名称

图3

点击获取年龄

图4

只有React是这样子？

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>

    class Person{
      constructor(name,age){
        this.name = name;
        this.age = age;
      }

      getName(){
        console.log(this?.name,this,'getName')
      }
      getAge = () =>{
        console.log(this?.age,this,'getAge')
      }
      render(){
        return{
          onClick : this.getName,
          onfocus : this.getAge,
        }
      }
    }

    const xm = new Person('xm',20);
    xm.getAge()
    console.log('---------------------')
    xm.getName()
    console.log('---------------------')
    console.log(xm,'xm')
    console.log('---------------------')
    xm.render().onClick()
    console.log('---------------------')
    xm.render().onfocus()
  </script>
</body>
</html>

复制代码

看关键的两张图

图5
new —MDN

图6

到此，相信你已经理解了一大半，上边这个类组件换成，js类一样的问题

构造函数的this指向它的实例
构造函数如果没有返回，那就返回this
箭头函数的this在创建的时候就决定了，最近的上下文

图一打印的是Test的组件的实例，类的类型是一个函数，类的实例，Test这个组件并没有返回任何东西，真正返回的是Test的render方法的返回，render在执行的时候绑定的函数，此时的this都是指向的是this的实例，这也是解释了为什么图一打印的this只有getAge这个方法，没有getName这个方法。