TypeScript类成员方法作云函数onCall参数时this为undefined问题求解

触发原因 #

这是典型的JavaScript/TypeScript中this隐式绑定丢失问题：
你将AccessController类的普通实例方法generateAccess直接作为回调参数传给functions.https.onCall时，方法脱离了所属的accessController实例上下文，运行时被调用时没有绑定的执行对象，严格模式下该场景的this会被赋值为undefined，因此访问this.appContext会触发报错。

额外注意点 #

你的server.ts中存在笔误：实例化类时应该引用首字母大写的类名，而非小写的实例变量名，正确写法为：

export const accessController = new AccessController(appContext);

可行解决方法 #

• 方法1：回调层用箭头函数包装，保留实例上下文
  箭头函数的this继承自外层定义时的上下文，不会被调用方改变：

export const generateAccess =
  functions
      .region(Constant.REGION.toString())
      .https
      .onCall((data, context) => accessController.generateAccess(data, context));

• 方法2：构造函数内手动绑定方法的this指向实例

export class AccessController extends BaseController {
  appContext!: AppContext;
  constructor(appContext: AppContext) {
    super(appContext);
    this.appContext = appContext;
    // 绑定方法this永远指向当前实例
    this.generateAccess = this.generateAccess.bind(this);
  }
  public async generateAccess(data, _) {
    return this.appContext.accessService.generate()
  }
}

• 方法3：将方法定义为类的箭头函数属性
  该写法下方法的this默认绑定到所属类实例，不会丢失：

export class AccessController extends BaseController {
  appContext!: AppContext;
  constructor(appContext: AppContext) {
    super(appContext);
    this.appContext = appContext;
  }
  public generateAccess = async (data, _) => {
    return this.appContext.accessService.generate()
  }
}

• 方法4：传递回调时用bind手动绑定实例

export const generateAccess =
  functions
      .region(Constant.REGION.toString())
      .https
      .onCall(accessController.generateAccess.bind(accessController));

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