javascript - 使用 Babel 转译器的 ES2015 孙子继承旁路链

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()

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

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

编辑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()