如何在 ES6 中从父类访问子类？ [复制]

Question

我有一个如下所示的基类：

class Speaker {
  sayHi() {
    if (this.isLoud) {
      console.log('HI');
    } else {
      console.log('hi');
    }
  }
}

还有一个看起来像这样的子类：

class LoudSpeaker extends Speaker {
}
LoudSpeaker.isLoud = true;

... 最后一行是尝试在 ES6 中创建类变量。问题是当我实例化LoudSpeaker 并调用sayHi 时，isLoud 变量是未定义的。是否可以从父类访问子类的类变量？

Answer 1

this.isLoud 与 LoudSpeaker.isLoud 不同。第一个引用实例变量，第二个引用 LoudSpeaker 构造函数的属性，其他语言将其称为类变量或静态属性。在 Javascript 中，您不能使用 this.isLoud 来引用类变量。

要覆盖子类中实例变量isLoud 的值，您可以在构造函数中设置它的值。

class Speaker {
  constructor() {
      this.isLoud = false;   // set default value
  }
  sayHi() {
    if (this.isLoud) {
      console.log('HI');
    } else {
      console.log('hi');
    }
  }
}

class LoudSpeaker extends Speaker {
   constructor() {
       super();
       this.isLoud = true;    // override to set our own value
   }
}

如果你真的希望isLoud 属性是一个类设置一次并且不再设置的东西，那么你可以在原型上设置它，然后你可以在实例中使用this.isLoud 引用它：

class Speaker {
  sayHi() {
    if (this.isLoud) {
      console.log('HI');
    } else {
      console.log('hi');
    }
  }
}

Speak.prototype.isLoud = false;           // set default value

class LoudSpeaker extends Speaker {
}

LoudSpeaker.prototype.isLoud = true;      // override for this class

这通常不会在 Javascript 中完成，因为如果您设置 this.isLoud = whatever，那么它会设置一个“自己的”属性，并且该属性将成为特定于该实例的实例属性，这可能会非常令人困惑并导致错误。所以，一般不会这样做。但是，如果您在原型上初始化值，而不是在实例上设置它，因此您只使用x = this.isLoud 读取它的值，那么它的行为就像一个可通过this 访问的类变量。

在 ES6 wiki 中有关于这个主题的讨论。有关详细信息，请参阅ES6 class variable alternatives，因为此功能故意被排除在 ES6 类语法之外，这就是为什么它在这里实现为在构造函数中设置的常规实例变量或直接在原型上设置的属性（而不是通过类语法） .