JavaScript 中的 public fields vs accessors

小半 • 2024年3月19日下午9:34 • 技术漫谈 • 阅读 208

直奔主题，给出如下代码：

class A {
  x = 1;
}
class B extends A {
  get x() {
    return 2;
  }
  set x(v) {}
}

const a = new A();
const b = new B();

console.log(a.x);
console.log(b.x);

猜猜它们分别打印什么？

下面的代码呢：

class A {
  constructor() {
    this.x = 1;
  }
}

class B extends A {
  get x() {
    return 2;
  }
  set x(v) {}
}

const a = new A();
const b = new B();
console.log(a.x);
console.log(b.x);

再下面的代码呢：

class A {
  x = 1;
  get x() {
    return 2;
  }
  set x(v) {}
}
const a = new A();
console.log(a.x);

你猜对了吗？

对于 public field，我们观察它在 chrome devtools 下的展现：

JavaScript 中的 public fields vs accessors

可以看到 x 是 A 对象的实例变量，不在其 prototype 上。

而对于 x accessor：

x accessor 出现在了 A 对象实例的 Prototype 上。

所以可作出如下结论：

Fields are part of the instance object. Accessors are part of the object’s prototype.(fields 是对象实例的一部分，而 accessors 是对象原型的一部分。)

进而得出：

So fields are hit before methods/accessors. (fields 总是比 methods/accessors 先被访问。)

所以上面的几个问题，答案就容易推导了。

对于第一个问题，因为 x=1 作用于对象实例，而 get x 作用于对象 prototype，因此 x=1 先被访问，两个打印的都是 1。

对于第二个问题，a.x 是 1 ，而 b.x 是 2。比较迷惑的是为什么 b.x 是 2，因为在 contructor 方法里，this 指向的是构造完的对象，即 B 的实例，此时的 this 的 prototype 中有个 x accessor，因此当调用 this.x=1 时，实际上是调用了 set x(v){} 这个accessor(如果不信，可以在 set x(){} 中加一句 console.log 观察)。由于该 set x 是空方法，因此 get x 会一直返回 2。