调用TypeScript类方法报Cannot read properties of undefined错误怎么办

问题原因 #

报错核心是foo方法执行时内部this指向丢失，没有指向BaselineCtrl的实例对象，触发TypeError: Cannot read properties of undefined (reading 'bar')。
常见触发场景有两种：

• 你将foo方法单独抽取后作为回调函数传递给其他逻辑执行，此时this会指向当前执行上下文的全局对象，严格模式下直接为undefined，导致读取bar失败。
• 你调用foo的方式错误，导致方法执行上下文偏移。

修复方案 #

可以任选以下一种方案解决：

方案1：类内使用箭头函数定义方法 #

箭头函数会继承定义时的上下文this，不会随调用方改变指向。

export default class BaselineCtrl {
  constructor() {}

  foo = async () => {
    this.bar();
  }

  bar = async () => {}
}

方案2：构造函数内手动绑定this #

在类初始化时就固定所有方法的this指向当前实例。

export default class BaselineCtrl {
  constructor() {
    this.foo = this.foo.bind(this);
    this.bar = this.bar.bind(this);
  }

  async foo() {
    this.bar();
  }

  async bar() {}
}

方案3：调用时手动绑定实例 #

调用的时候指定this指向，或者用箭头函数包裹调用逻辑避免指向偏移，适合不想改动原有类定义的场景。

// 手动绑定调用
this.baselineCtrl.foo.call(this.baselineCtrl);

// 作为回调时用箭头函数包裹
// 示例：addEventListener('click', () => this.baselineCtrl.foo())

额外注意 #

你给出的调用代码里，赋值逻辑和调用逻辑的上下文要统一：如果是在类内部使用，赋值时需要加上this.，即this.baselineCtrl = new BaselineCtrl();，避免赋值到全局变量，后续调用时读取不到实例。

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