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

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
}

这声明了一个类字段。这还不是标准，它是a proposal in stage 3。它可能会改变，但不会改变太多。第 3 阶段是候选阶段，可能包括完成改进。

无论如何，根据提案的当前规范，您所看到的都是正确的。任何没有初始化器的类字段都设置为undefined。发生这种情况是因为您在 B 中有另一个名为 name 的类字段，没有初始化程序。父构造函数中发生的赋值将被覆盖。

Here is the relevant part of the proposal that discusses this behaviour:

没有初始化的字段被设置为undefined

无论是否存在初始化程序，公共和私有字段声明都会在实例中创建一个字段。如果没有初始化程序，则该字段设置为undefined。这与某些转译器实现有些不同，后者将完全忽略没有初始化器的字段声明。

例如，在以下示例中，new D 将生成一个对象，其y 属性为undefined，而不是1。

class C {
  y = 1; 
} 
class D extends C {
  y; 
}

将不带初始值设定项的字段设置为undefined 而不是擦除它们的语义是，字段声明提供了可靠的基础，以确保属性存在于创建的对象上。这有助于程序员将对象保持在相同的一般状态，这可以使其易于推理，有时在实现中更可优化。

Answer 2

这个例子是从MDN借来的，以表明这种行为不应该发生。

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.

如果您在 SO 中的 sn-p 配置中选中 Use BabelJS / ES2015 复选框，则您的代码不会出现问题。

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