ES2015 孙子继承绕过链与 Babel 转译器

Question

我正在使用 ES2015 Babel 转译器。

我遇到了一些非常奇怪的事情。实际的类很复杂。所以我将使用一个我实际上没有运行的示例。这是一个时间问题我不知道我是否可以用下面的代码完全复制它，但想法是这样的：

class A {
  static instance() {
    if (!A._instance) {
       A._instance = new A();
    }
    return A._instance;
  }

  foo() {
    console.log('A')
  }
}

class B extends A {
  static instance() {
    if (!B._instance) {
       B._instance = new B();
    }
    return A._instance;
  }

  foo() {
    console.log('B')
    super.foo();
  }
}

class C extends B {
  static instance() {
    if (!C._instance) {
       C._instance = new C();
    }
    return C._instance;
  }

  foo() {
    console.log('C')
    super.foo();
  }
}

// Somewhere else
class User {
  static bar() {
    C.instance().foo(); // Sometimes, this calls B.foo() directly, C.foo() is bypassed!
  }
}

// create A._instance first
A.instance().foo();

// now C will inherint _instance from B which inherits is from A.
User.bar()

我在一个普通的 Cordova 项目中使用 Gulp 运行 ES6 转译器。但是当我尝试在桌面 Chrome 中运行它时，同样的事情发生了。

有时C.instance().foo() 实际上并不调用 C 中定义的foo，而是调用B.instance().foo()。 “有时”是指当我加载登录页面并照常登录时，我可以在 Chrome 中 100% 复制它。但我永远无法复制它，如果选中了应用程序的Remember me 选项，并且用户直接登录到主页。这似乎是一个时间问题。但我不知道它到底是什么。有什么线索吗？

编辑 1： 通过在 index.html 中单独使用普通的旧嵌入脚本标签，将代码文件包含到项目中。

Answer 1

其实问题如下。

如果您首先调用父类instance 方法，您的子类也将由于继承而具有_instance 属性。您需要检查您的子类是否有自己的名为_instance 的属性。

class A {
  /**
   * OOP all the way. Let's define static method that 
   * checks for own property `_instance`
   */
  static hasOwnInstance() {
    return Object.prototype.hasOwnProperty.call(this, '_instance')
  }
  static instance() {
    // rewrite to use this instead of class name
    if (!this.hasOwnInstance()) { // now we check only own properties
       this._instance = new this();
    }
    return this._instance;
  }

  foo() {
    console.log('A')
  }
}

class B extends A {
  /* Now safe to simply inherit implementation from A
  static instance() {
    if (!B.hasOwnInstance()) {  // now we check only own properties
       B._instance = new B();
    }
    return B._instance;
  } */

  foo() {
    console.log('B')
    super.foo();
  }
}

class C extends B {
  foo() {
    console.log('C')
    super.foo();
  }
}

// Somewhere else
class User {
  static bar() {
    C.instance().foo(); // Sometimes, this calls B.foo() directly, C.foo() is bypassed!
  }
}

// call B.instance first
console.log('B.foo')
B.instance().foo();

console.log('C.foo')
User.bar()