如何在不创建外部变量的前提下让JS单例Store始终返回首个实例

你的代码核心问题是实例属性与静态属性的混淆：类中定义的instance = null是每个实例都会独立拥有的实例字段，但构造函数里用来判断的SingletonStore.instance是类的静态属性。这种混用可能导致执行逻辑不符合预期，最终出现第二次实例化时ID被覆盖的情况。

下面是基于现有代码的修复方案，全程不需要额外外部变量：

class SingletonStore {
  static instance = null; // 改为类的静态属性，全局唯一
  constructor(id) {
    console.log(this, 'this obj')
    // 仅在单例实例未创建时初始化
    if (!SingletonStore.instance) {
      this.id = id;
      SingletonStore.instance = this;
    }
    // 强制返回单例实例，覆盖new操作创建的新对象
    return SingletonStore.instance;
  }
}

const emp1 = new SingletonStore(1);
const emp2 = new SingletonStore(2);

console.log("First  : ", emp1); // 输出 { id: 1 }
console.log("Second  : ", emp2); // 输出 { id: 1 }
console.log(emp1 === emp2); // true，验证两个变量指向同一个实例

修复逻辑说明 #

1. 用static关键字将instance绑定到类本身，确保全局只有一个单例引用，不会被每个新实例重置。
2. 构造函数最后强制返回静态属性保存的单例实例，不管new操作创建了多少新对象，最终都会替换成已有的单例。
3. 只有第一次调用new时会初始化id并保存实例，后续调用直接返回已存在的实例，不会修改原有实例的属性。

如果需要兼容不支持static语法的旧环境，也可以手动给类添加静态属性：

class SingletonStore {
  constructor(id) {
    console.log(this, 'this obj')
    if (!SingletonStore.instance) {
      this.id = id;
      SingletonStore.instance = this;
    }
    return SingletonStore.instance;
  }
}
// 手动初始化类的静态属性
SingletonStore.instance = null;

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