原型上属性的 set 和 get 方法不会从没有 set-get 方法的实例上的相应属性中隐藏

Question

我有来自Eric Faust ES6 class syntax sugar的以下代码：

function Circle(radius) {
      this.radius = radius;
      Circle.circlesMade++;
  }

  Circle.draw = function draw(circle, canvas) { /* Canvas drawing code */ }

  Object.defineProperty(Circle, "circlesMade", {
      get: function() {
          return !this._count ? 0 : this._count;
      },

      set: function(val) {
          this._count = val;
      }
  });

  Circle.prototype = {
      area: function area() {
          return Math.pow(this.radius, 2) * Math.PI;
      }
  };

  Object.defineProperty(Circle.prototype, "radius", {
      get: function() {
          return this._radius;
      },

      set: function(radius) {
          if (!Number.isInteger(radius))
              throw new Error("Circle radius must be an integer.");
          this._radius = radius;
      }
  });

  let x = new Circle("pippo");

而且我不明白为什么会启动异常。 setter 和 getter 方法与 radius 访问器属性上的原型 Circle.prototype 相关联，而不是当我创建 x 实例时，我也设置了 radius 属性，但在构造函数中，因此我希望 setter 和 getter 不是触发（再次因为实例上的radius 属性和原型上的radius 属性是在两个不同的对象上定义的）。在这种情况下，我想念 setter 和 getter 的工作方式。有人可以澄清一下吗？

还有一个无关紧要的小问题，是在构造函数Circle上定义static属性circlesMade还是在原型上定义更正确？

Answer 1

在构造函数中，对this.radius 的赋值是对this 的“半径”属性的赋值。 this 的值当然是新创建的对象，并且在构造函数代码运行时，该对象的原型链已经建立。因此“半径”的设置器肯定会被调用，你会得到异常。

setter 和 getter 方法确实在原型上，但这样做的重点是让每个实例都共享该行为。构造函数中this 引用的对象就是这些实例之一。

对于没有 getter/setter 函数的“简单”原型属性，在构造函数或其他任何地方分配给 this.whatever 将始终在目标对象上创建一个属性本地，而不是更改原型上的属性值。带有 getter/setter 方法的属性不能这样工作。

请注意，构造函数中的代码与任何其他函数中的代码都遵循不同的规则。在进入函数和退出函数的过程中会发生特殊的事情，否则就是普通的代码。