TypeScript单例模式中this有时为undefined的问题排查

问题原因 #

你遇到的TypeError: Cannot read properties of undefined (reading '_service')错误，核心是函数调用时的上下文（this指向）丢失。

启动时调用funcB正常，是因为你直接通过单例实例链式调用（Singelton.getInstance().funcB()），此时this正确指向单例对象；而后续调用funcA时，大概率是把funcA作为单独的函数引用传递（比如当作回调、事件处理函数），没有保留实例上下文，导致this在严格模式下变成undefined。

举个错误调用的典型例子：

// 错误：直接提取函数引用，丢失this上下文
const handleData = Singelton.getInstance().funcA;
handleData(someData); // 此时this为undefined

解决方案 #

1. 调用时手动绑定上下文 #

传递函数引用前，用bind把this绑定到单例实例：

const singleton = Singelton.getInstance();
const handleData = singleton.funcA.bind(singleton);
handleData(someData); // this正确指向单例

2. 用箭头函数定义类方法 #

箭头函数会自动捕获类实例的this，无论怎么传递函数引用，上下文都不会丢失。修改funcA的定义：

export class Singelton {
  // ... 其他代码不变
  public funcA = (data: Data): void => {
    this._service.someLogic(...);
  }
}

注：箭头函数属于实例属性，不会挂载到原型上，但单例模式只有一个实例，不存在内存浪费问题。

3. 始终通过实例链式调用 #

确保每次调用funcA都直接通过单例实例调用，不单独提取函数引用：

Singelton.getInstance().funcA(someData);

验证单例实现 #

你的单例模式代码本身没有问题，getInstance方法确保了全局只有一个实例，启动时funcB能正常返回结果也证明实例初始化正确，_service已被正常实例化，问题完全出在funcA的调用方式上。

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