使用 JS Class Setter & getter 和内联函数

Question

我目前正在尝试设置一个 class，其中属性是另一个对象的数组（由另一个 class 定义）。

我正在使用 set/get 来管理值。我也在构造函数中初始化它们。

我想要实现的是向同一个属性添加内联函数，使整体生活更轻松。但是，我觉得我在这里使用了错误的方法。

class _MainObject {
    constructor(){
        this._property = [];
        this.property= {
            add(value, index){
                if (value.constructor.name !== '_SubObject'){
                    return;
                }

                this._property.splice(index, 0, value);
            },
            remove(value){
                if (value.constructor.name !== '_SubObject'){
                    return;
                }

                const index = this._property.findIndex((pId) => pId === value.id);
                this._property.splice(index, 1);
            }
        };
    }

    set property(value){
        if (Array.isArray(value)){
            value.map((el) => {
                if (el.constructor.name !== '_SubObject') return;
            });
            this._property = value;
        }
        //Tried a bunch of stuff here to assign the default object from above on the first initialization.
    }
    get property(){
        return this._property;
    }
}

每当构造函数初始化属性时，它都会触发“设置”并且不会将函数分配给 'property' 本身。

我想要 obj._property 中的实际数据，但通过调用 obj.property 获取。我还希望能够调用 obj.property.add().

这在某种程度上一定是可行的，我只是不知道怎么做。

理想情况下，我想使用 ES5+ 语义。

在此先感谢您提供的任何帮助。

Answer 1

class Property {
    constructor(){
        this.value = [1,2,3];
    }

    add(x){
        this.value = [...this.value, x]
    }
}

class _MainObject {
    constructor(){
        this._property = new Property();
    }

    set property(value){
        if (Array.isArray(value)){
            this._property = value;
        }
    }
    get property(){
        return this._property;
    }

}

const a = new _MainObject()
console.log(a.property)
a.property.add(4)
console.log(a.property)

您需要将属性包装到它自己的 class 中。

这是执行此操作的唯一方法，因为您不能拥有同名的 getter 和函数或属性，如下所述：

Can JS have getters and setters methods named same as property?

Function and variable with the same name

使用 JS Class Setter & getter 和内联函数

Using JS Class Setter & getter along with inline functions

javascript

class

ecmascript-5