继承值覆盖getter：JavaScript类异常行为技术问询

出现这个结果是因为实例自身的属性优先级高于原型链上的访问器属性（getter/setter），具体逻辑如下：

• 类A中的test = 1属于类字段语法，会在每个实例（包括B的实例）创建时，直接在实例对象本身添加一个名为test的属性，值为1。
• 类B中定义的get test()是添加在B的原型对象上的访问器属性。
• 当访问b.test时，JavaScript会先在实例自身查找test属性，找到后直接返回其值，不会再去原型链上查找对应的getter。

示例代码验证 #

class A {
  test = 1;
}

class B extends A {
  get test() {
    return 2;
  }
}

const b = new B();
console.log(b.test); // 输出1

解决方案 #

如果想让B的getter生效，可以通过两种方式实现：

1. 在B的构造函数中删除实例上继承自A的test属性，这样访问时会走原型上的getter：

class B extends A {
  constructor() {
    super();
    delete this.test;
  }
  get test() {
    return 2;
  }
}

const b = new B();
console.log(b.test); // 输出2

2. 修改A的定义，把test改为原型上的访问器属性，这样B的getter可以直接覆盖父类的定义：

class A {
  get test() {
    return 1;
  }
}

class B extends A {
  get test() {
    return 2;
  }
}

const b = new B();
console.log(b.test); // 输出2

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