使用Babel转译ES2015时遇到继承链绕过的时序异常问题

嘿，我看了你遇到的这个继承链绕过的问题，结合你贴的代码片段，大概率是几个常见原因导致的，咱们一步步拆解来看：

问题成因 #

• 最直接的笔误问题：你贴的B类instance方法最后写的是return A._instanc...，明显是没写完，但大概率是不小心返回了A._instance而非B._instance。这就导致调用B.instance()时，哪怕你正确创建了B._instance，最后返回的却是A的单例，直接绕过了B的实例，这肯定会出问题。
• 重复实现单例逻辑的冗余风险：你在A和B里都手动写了instance方法，这种重复代码很容易出现手误——比如写错返回的实例对象，或者判断实例是否存在时用错了类的引用（比如不小心用A代替了B）。
• （如果是时序相关的隐藏问题）如果你的业务代码里有异步逻辑或提前加载的场景，可能在B的instance方法初始化完成前，就有其他代码调用了A.instance()，不过从你给出的核心逻辑来看，这不是主要问题，核心还是单例实现的错误。

解决办法 #

1. 先修正笔误（最快修复）

把B类instance方法的返回值改成return B._instance，修正后的代码如下：

class B extends A { 
  static instance() { 
    if (!B._instance) { 
      B._instance = new B(); 
    } 
    return B._instance; // 这里修正为返回B的实例
  }
  foo() { console.log('B') }
}

2. 重构单例逻辑，避免重复代码

把单例的通用逻辑抽到父类中，利用JavaScriptthis的动态绑定特性，让子类自动继承正确的单例逻辑，不用重复写instance方法，从根源上避免手误：

class A {
  // 通用单例方法
  static getInstance() {
    // this会指向调用该方法的类（A或B）
    if (!this._instance) {
      this._instance = new this();
    }
    return this._instance;
  }
  
  foo() { console.log('A') }
}

// 子类B无需重写单例方法，直接继承即可
class B extends A {
  foo() { console.log('B') }
}

// 测试调用
A.getInstance().foo(); // 输出"A"
B.getInstance().foo(); // 输出"B"

3. 增强封装性：使用静态私有字段

如果你的环境支持ES2022+，可以用静态私有字段#_instance替代公共的_instance，防止外部代码意外修改单例实例，让代码更健壮：

class A {
  static #_instance;
  
  static getInstance() {
    if (!this.#_instance) {
      this.#_instance = new this();
    }
    return this.#_instance;
  }
  
  foo() { console.log('A') }
}

class B extends A {
  static #_instance; // 子类拥有独立的私有静态字段，和父类互不干扰
  foo() { console.log('B') }
}

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