javascript - 将 ownProperty 对象添加到 Object 的原型(prototype)时出错

Question

我使用Object.defineProperty向对象添加一些属性。当我添加到对象的属性时它可以正常工作。但是当我将它添加到对象的原型(prototype)时，我收到了 too much recursion 错误。

var obj = {};
Object.defineProperty(obj.__proto__, 'key', {
    enumerable: true,
    get: () => {return key},
    set: (value) => {
        if (typeof(value) == 'number'){
            key = 2*value;
        }
     }
});
obj.key = 3;
console.log(obj.key);

为什么原型(prototype)中的对象不能这样添加？

Answer 1

这是因为通过在对象原型(prototype)上定义属性，每个对象都会获得该 getter/setter。 JS 中的所有内容都是一个对象，因此这意味着 window 也将有一个 key setter/getter。

在您的 setter/getter 函数中，您只需使用 key 。由于您没有显式定义 key 变量，因此它将使用 window 上定义的变量。这就是导致递归的原因。

你执行obj.key = 3，它调用setter，它执行window.key = 2*value，它调用setter，它执行 window.key = 2*value。依此类推，直到达到最大调用堆栈。

除非您希望在每个实例上都添加某些内容，否则不要在原型(prototype)上添加某些内容。

由于您使用的是箭头函数，因此没有 this 绑定(bind)到 setter/getter 调用，因此您无法知道您正在与哪个实例对象交互。

相反，不要扩展对象的原型(prototype)，创建您自己的原型(prototype)，并设置/获取正确的变量/属性。

例如使用实际的构造函数，并将箭头函数更改为正则函数表达式。这将使 setter/getter 可以获得对象的实例引用。然后，您将需要某种方法来跟踪哪个键属于哪个实例。如果不需要隐藏这些变量，您可以简单地使用带前缀的命名属性，例如: this._key = 2*value; 否则您可以使用 WeakMap如果您想将它们保密。

function YourClass(){};

(function(){
  var keyMap = new WeakMap();
  Object.defineProperty(YourClass.prototype, 'key', {
    enumerable: true,
    get: function(){
      return keyMap.get(this);
    },
    set: function(value){
      if(typeof(value) == "number"){
        keyMap.set(this,2*value);
      }
    }
  });
})();
obj = new YourClass();
obj.key = 3;
console.log(obj.key);


function secondClass(){}

//make secondClass inherit from YourClass
secondClass.prototype = Object.create(
  YourClass.prototype,
  {
    "constructor": { 
    configurable: true,
    enumerable: false,
    writable: true,
    value: secondClass
  }
});

var obj2 = new secondClass();
obj2.key = 16;
console.log(obj2.key);

此外，由于您似乎可以使用 ES6，因此您可以只使用具有 set/get 语法的类

class YourClass {
   constructor(){
      this._key = null;
   }
   set key(value){
      this._key = 2*value;
   }
   get key(){
      return this._key;
   }
}

class SecondClass extends YourClass {
  constructor(){
    super();
  } 
}

var obj = new SecondClass();
obj.key = 17;
console.log(obj.key);