调用自定义TypeScript类方法时this属性报undefined错误如何解决？

你遇到的报错核心是workerSearch方法调用时丢失了类实例的this绑定：
当你没有通过workerSearchObj.workerSearch()的形式直接调用方法，而是把方法单独提取出来作为回调、或者解构后调用时，严格模式下方法内部的this会指向undefined，自然找不到挂载在实例上的loadingWorkers、possibleWorkers属性。
常见的触发场景包括：将workerSearch直接作为UI事件的回调函数、在异步逻辑中单独调用该方法等。

有三种常用的修复方式，按需选择即可： #

方案1：类方法定义时用箭头函数固化this（推荐） #

直接修改WorkerSearch类的workerSearch方法定义，用箭头函数替代普通方法，箭头函数的this会在定义时永久绑定到类实例，不会随调用方式变化：

export class WorkerSearch {
  private loadingWorkers: Ref<boolean>;
  private possibleWorkers: Ref<UnwrapRef<Array<TsadWorker>>>;

  constructor(loadingWorkers: Ref<boolean>, possibleWorkers: Ref<UnwrapRef<TsadWorker[]>>) {
    this.loadingWorkers = loadingWorkers;
    this.possibleWorkers = possibleWorkers;
  }

  // 改为箭头函数定义
  public workerSearch = (email: string) => {
    console.log("worker search");
    this.loadingWorkers.value = true;
    const map = new Map<string, StringFilterField>();
    map.set("email", StringFilterField.fromValue(email));
    const searchRequest = new SearchRequest(10, 0, map);
    axios
      .post(process.env.VUE_APP_BACKEND_URL + "users/workers/search", searchRequest)
      .then(response => {
        console.log("response recieved")
        this.possibleWorkers.value = response.data
        this.loadingWorkers.value = false
      })
      .catch(error => {
        defaultErrorHandler(error)
      })
  }
}

方案2：调用时手动绑定this #

如果不想修改类定义，可以在传递/调用方法时手动绑定实例：

• 作为回调传递时：

// 比如绑定给点击事件
const onSearch = workerSearchObj.workerSearch.bind(workerSearchObj)

• 或者用匿名函数包一层调用：

// 比如点击事件回调
() => workerSearchObj.workerSearch('xxx@xx.com')

方案3：始终通过实例调用方法 #

保证所有调用workerSearch的位置，都是直接通过实例对象调用：workerSearchObj.workerSearch(参数)，不要把方法单独提取出来使用。

内容的提问来源于stack exchange，提问作者Ace of Spade