Angular调用函数时内部this为undefined的问题原因及解决办法

你遇到的this丢失问题本质是普通类方法的运行时上下文绑定丢失，和你怀疑的箭头函数调用逻辑无关：

• 你当前定义的arrowFunc是普通类方法，这类方法的this指向由运行时的调用方决定，不是定义时就绑定组件实例
• 常见触发场景是你把arrowFunc作为回调传递给了事件监听、RxJS订阅器、模板事件绑定等逻辑，传递时只写了函数名没有绑定上下文
• TypeScript默认开启严格模式，上下文丢失后this不会指向全局对象，而是直接变为undefined，完全符合你遇到的表现
  你提到的"const声明之外的位置this存在"是断点观察位置偏差导致的错觉，实际进入arrowFunc执行时上下文已经丢失。你使用的const self = this是ES6之前解决this丢失的经典方案，功能正常但不符合现代TypeScript/Angular的开发规范。

按推荐优先级排序如下：

方案1：将arrowFunc定义为箭头函数属性（Angular场景最推荐） #

直接在组件中把方法定义为箭头函数属性，定义时就自动绑定当前组件实例作为固定this，不需要额外处理：

// 组件内定义代码
arrowFunc = (action: (hasRangeConfigurations: boolean) => void) => {
    const criteria = {
        brandId: this.marketingRange?.brand?.id,
        pageNumber: 1,
        pageSize: 1,
    } as Myresults
    
    // 其余原有逻辑
}

优点：一次定义处处可用，不需要每次调用时重复绑定上下文，代码简洁不易出错。

方案2：传递回调时手动绑定上下文 #

如果不想修改方法的定义方式，可以在把arrowFunc作为回调传递的位置用bind绑定this：

// 示例：给RxJS订阅传回调时绑定
someProductChangeSub.subscribe(this.arrowFunc.bind(this));
// 示例：模板中绑定事件时处理
(change)="arrowFunc.bind(this)($event)"

缺点：每次传递都要手动绑定，容易遗漏导致问题复现。

方案3：调用时显式指定上下文 #

临时调用场景可以用call/apply主动传入组件实例作为上下文：

onProductChanged(event) {
  // 调用时把当前组件实例作为第一个参数传入
  this.arrowFunc.call(this, hasRangeConfigurations => {
    console.log("do something");
  })
}

适合偶发的单次调用场景，不适合高频调用的逻辑。

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