React类组件中打印this对象无法找到自定义方法的问题咨询

问题原因 #

你定义的changeMyName、recall是ES6类的普通实例方法，这类方法默认会挂载到App类的原型对象上，不会作为可枚举属性直接出现在类的实例（也就是你打印的this）自身属性列表里，所以你直接打印this看不到这两个方法。
而你调用this.changeMyName能生效，是因为JS的原型链查找机制：访问实例属性时如果实例自身不存在，会自动顺着原型链向上查找构造函数的原型对象，原型上存在对应方法所以可以正常调用。

查找自定义方法的位置 #

你展开打印的this对象，找到名为[[Prototype]]（部分旧浏览器会显示为__proto__）的属性，展开后就能看到changeMyName和recall两个方法。你给出的this打印结果末尾的<constructor>: "App"对应的就是实例的构造函数原型入口，展开该节点就能找到你定义的两个自定义方法。
你也可以用下面的代码直接验证打印：

changeMyName() {
  // 打印原型对象，直接能看到自定义方法
  console.log(Object.getPrototypeOf(this))
  this.recall();
}

额外说明 #

如果你希望方法直接出现在this的自身属性列表里，可以改成类字段箭头函数的写法：

class App extends React.Component{
  // 类字段写法，方法直接挂载到实例自身
  changeMyName = () => {
    console.log(this)
    this.recall();
  }

  recall = () => {
    console.log('recall');
  }

  // 省略其余代码...
}

这种写法不仅能让你直接在打印的this里看到自定义方法，还自带this绑定效果，不需要在绑定点击事件的时候手动写bind(this)。

内容的提问来源于stack exchange，提问作者devstefancho