Javascript：为什么在子类中声明一个属性会覆盖超类中的相同属性为空

Question

我的问题与理解类如何为属性赋值以及如何在 Javascript 中实例化对象有关。我想更多地了解这个过程是如何工作的。

如果我创建两个类，其中第二个继承自第一个

class A {

    name

    constructor(name){

        this.name = name

    }

}

class B extends A {

    name

    status

    constructor(name, status){

        super(name)

        this.status = status

    }

}

然后创建 B 类的实例，当我将它打印到控制台时

x = new B('myClass', true)

console.log(x)

它打印名称变量未定义

B { name: undefined, status: true }

我很确定 B 中的 name 属性覆盖了 A 中的 name 属性，但为什么 A 构造函数不将新的 name 变量分配为传递给它的值？

Answer 1

目前（2020 年 10 月）这是正确的行为。当你设置class A {     name }这声明了一个类字段。这还不是一个标准，它是第 4 阶段的提案。它可能会改变，但不会太大。第 3 阶段是候选阶段，可能包括完成改进。无论如何，根据提案的当前规范，您所看到的是正确的。任何没有初始化器的类字段都设置为undefined. 发生这种情况是因为您在没有初始化程序的情况下调用了另一个类name字段B。父构造函数中发生的赋值将被覆盖。以下是讨论此行为的提案的相关部分：没有初始值设定项的字段设置为undefined公共和私有字段声明都会在实例中创建一个字段，无论是否存在初始化程序。如果没有初始值设定项，则该字段设置为undefined. 这与某些转译器实现有些不同，后者会完全忽略没有初始化器的字段声明。例如，在以下示例中，将生成属性为而非 的new D对象。yundefined1class C {   y = 1;  }  class D extends C {   y;  }在没有初始化器的情况下设置字段而不是擦除它们的语义undefined是字段声明提供可靠的基础以确保属性存在于创建的对象上。这有助于程序员将对象保持在相同的一般状态，这可以使推理变得容易，有时在实现中更可优化。

Answer 2

class Animal {   constructor(name) {    this.name = name;  }    speak() {    console.log(`${this.name} makes a noise.`);  }}class Dog extends Animal {  constructor(name) {    super(name); // call the super class constructor and pass in the name parameter  }  speak() {    console.log(`${this.name} barks.`);  }}let d = new Dog('Mitzie');d.speak(); // Mitzie barks.如果您选中Use BabelJS / ES2015SO 中代码段配置中的复选框，则您的代码不会出现任何问题。class A {    name;    constructor(name){        this.name = name;    }}class B extends A {    name;    status;    constructor(name, status){        super(name);        this.status = status;    }}let a = new B('myClass',true);console.log(a);但是如果取消勾选... class A {        name;        constructor(name){            this.name = name;        }    }    class B extends A {        name;        status;        constructor(name, status){            super(name);            this.status = status;        }    }    let a = new B('myClass',true);    console.log(a);...相同的代码提供了您注意到的错误。那么究竟是什么问题以及如何解决呢？无需name在子类中再次设置。如果不这样做，结果如下： class A {        name;        constructor(name){            this.name = name;        }    }    class B extends A {        status;        constructor(name, status){            super(name);            this.status = status;        }    }    let a = new B('myClass',true);    console.log(a);