当涉及继承时,存储ES6 Javascript类的getter/setter

Storing an ES6 Javascript class's getter/setter when inheritance is involed

本文关键字:类的 Javascript getter setter ES6 存储 继承      更新时间:2023-09-26

Edit:我做以下处理的原因是我可以将对getter/setter的引用存储在字典中。这允许我将字典的键作为一个HTML元素的ID。因此,如果在HTML中更改了属性,我可以这样做:

var propData = allMyGetterSetters[e.originalTarget.id];
propData.getSet.set(propData.obj, e.originalTarget.value);

这也允许我做一个循环和更新所有的HTML,如果我的逻辑改变它。


我需要存储对一个类的几个属性的getter/setter的引用。我已经设法做到这一点与以下代码:

Object.getOwnPropertyDescriptor(Object.getPrototypeOf(myClassObj.position), "x");

为简单起见,因为我必须多次执行此操作,所以我使用以下方法:

_makeGetSetObj(object, property){
    return {
        getSet: Object.getOwnPropertyDescriptor(Object.getPrototypeOf(object), property),
        obj: object
    };
}

后面的代码看起来像这样:

var xPos = this._makeGetSetObj(myClassObj.position, "x");
// ...
xPos.getSet.get(xPos.obj);

这一切都很完美。

但是,我现在需要存储对myclassObj对象的getter/setter的引用。但是,下面的

不起作用
this._makeGetSetObj(myClassObj, "name");

这实际上给了我一个错误,即对象上不存在name。我已经发现问题出在我的继承上,它看起来像这样

|-- BaseClass
  |-- MyClass
    |-- DerivedClass

问题似乎是myClassObj实际上是DerivedClass类型的对象,它没有name属性。

那么,如果我这样做:

this._makeGetSetObj(myClassObj.__proto__, "name");

它可以获得原型,但是当我尝试使用它如上所示(我的xPos示例)时,它失败了,因为它似乎仍然将obj中的引用存储为DerivedClass对象。

如果我拉出我的方法,并手动尝试,这工作:

var name = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(myClassObj.__proto__), "name");
name.get(myClassObj);

这显然破坏了我的方法,因为一部分需要__proto__,而另一部分不需要。

所以,我的问题是:是否有一种方法可以保持我当前的逻辑,或者我必须为具有所描述问题的地方创建一个特殊的方法?

谢谢。

硬编码的原型闻起来不好。原型链应该始终迭代:

let proto = obj;
let descriptor;
do {
  descriptor = Object.getOwnPropertyDescriptor(proto, prop);
} while (!descriptor && proto = Object.getPrototypeOf(proto))
...

此功能已由Reflect实现。它可以是

,而不是手动解析描述符。
const getSet = {
  get: () => Reflect.get(obj, prop),
  set: (val) => { Reflect.set(obj, prop, val) }
};

还是……

const getSet = {
  get: () => obj[prop],
  set: (val) => { obj[prop] = val }
};