为何子类可用字段重写基类getter，却无法用getter重写基类字段？

这不是你的操作问题，而是JavaScript类体系中实例属性与原型访问器的优先级、初始化顺序差异导致的必然结果，下面具体拆解：

核心原理：属性查找优先级与初始化顺序 #

JavaScript的属性查找遵循「实例自身属性 > 原型链上的属性/访问器」的规则，同时类实例的初始化有固定顺序：

1. 子类实例创建时，先调用super()执行基类的构造逻辑，包括基类实例字段的初始化——这会直接在实例对象上添加对应的属性。
2. 之后执行子类的实例字段初始化，覆盖实例上的同名属性。
3. 类的getter/setter是挂载在子类的原型对象上的，只有当实例自身没有对应属性时，才会去原型链查找并触发访问器。

结合你的代码分析 #

1. 基类A的成员特性 #

• foo：是挂载在A.prototype上的getter（原型访问器），实例自身默认没有foo属性。
• bar：是实例字段，创建A实例时会直接在实例上添加bar属性。

2. 子类B的情况 #

• foo被实例字段覆盖：B的foo是实例字段，在super()执行完基类逻辑后，子类会在实例上添加foo = 'B.foo-as-field'，此时实例自身有foo属性，优先级高于A.prototype上的getter，所以访问this.foo取的是实例字段值。
• bar的getter未生效：B的bar是原型访问器，但super()执行时，基类A的bar = 'A.bar-as-field'已经在实例上添加了bar属性。由于实例属性优先级更高，访问this.bar时直接取实例上的A.bar-as-field，不会触发原型上的getter。

3. 子类C的情况 #

• foo被子类getter覆盖：C的foo是挂载在C.prototype上的getter，会覆盖A.prototype上的同名getter。因为实例自身没有foo属性，所以访问this.foo时会触发子类的getter。
• bar被实例字段覆盖：C的bar是实例字段，在super()执行后，子类会用C.bar-as-field覆盖实例上已有的A.bar-as-field，所以访问this.bar取的是子类的实例字段值。

验证与解决方案 #

如果想让子类的getter覆盖基类的实例字段，可以在子类构造函数中主动删除实例上的对应属性，让访问器生效：

class B extends A {
  foo = 'B.foo-as-field';
  constructor() {
    super();
    delete this.bar; // 删除实例上的bar属性，访问时会触发原型的getter
  }
  get bar() {
    return 'B.bar-as-getter';
  }
  set bar(val) {}
  go2() {
    console.log('B.go2', this.foo, this.bar);
  }
}

此时new B().go()会输出B go B.foo-as-field B.bar-as-getter，符合预期。

内容的提问来源于stack exchange，提问作者Nexus