使用相同的 getter 和 setter 创建多个属性

Question

问题

最近我在写一些JavaScript程序，其中涉及到getters and setters的使用。我阅读了这两种方法的 MDN 文档，但在尝试使用它们时感到困惑。

简而言之，我只想创建一系列类似的属性，它们将具有相同的 getters 和 setters，但 我不想为每个属性.

重写每个 setter 和 getter

实施

综上所述，我尝试执行以下代码：

var defaultProperty = {
    set: function(val) {
        this.value = val - 1; // Just an example
    },
        
    get: function() {
        return this.value + 1; // Just an example
    }
};

var myObj = {};
Object.defineProperties(myObj, {
    foo: defaultProperty,
    bar: defaultProperty
});

然后我为 foo 和 bar 属性分配了新值，如下所示：

myObj.foo = 3;
myObj.bar = 7;

最后，我期待这样的事情：

console.log(myObj.foo, myObj.bar);
> 3 7

但我意外地得到了这个：

> 7 7

看起来这两个属性要么引用相同的内存地址，要么共享相同的 setters/getters。注意到这一点，我试图解决这个问题，并分别创建了每个属性，如下所示：

Object.defineProperties(myObj, {
    foo: {
        set: function(val) {
            this.value = val - 1;
        },
        
        get: function() {
            return this.value + 1;
        }
    },

    bar: {
        set: function(val) {
            this.value = val - 1;
        },
        
        get: function() {
            return this.value + 1;
        }
    }
});

但结果是一样的：

myObj.foo = 3;
myObj.bar = 7;
console.log(myObj.foo, myObj.bar);
> 7 7

我也尝试使用__defineSetter__和__defineGetter__函数，但结果没有改变。

我的问题

现在，在多次尝试解决我的问题失败后，我想知道：

是否可以在对象的不同属性上定义相同的 setter 和 getter？
如果是这样，我做错了什么，为什么我的属性表现得像它们一样属性？
有没有更好的方法来完成我正在尝试做的事情（可能不需要为每个属性编写每个 setter 和 getter）？

Answer 1

Is it possible to define the same setters and getters on different properties of an object?

是的，虽然根据您的经验不推荐这样做。

what am I doing wrong, and why do my properties behave like they're the same property?

因为它们 store/access set/gotten 的值始终存储在您对象上的相同 .value 属性中：myObj.value == 6 所以两者 myObj.foo 和 myObj.bar 产生 7.

Is there any better method to accomplish what I'm trying to do?

将值存储在闭包范围变量中，并使用函数定义属性：

function makeDefaultProperty(obj, name) {
    var value;
    return Object.defineProperty(obj, name, {
        set: function(val) {
            value = val - 1; // Just an example
        },
        get: function() {
            return value + 1; // Just an example
        }
    });
};

var myObj = {};
makeDefaultProperty(myObj, "foo");
makeDefaultProperty(myObj, "bar");

当然，您可以简单地使用不同的 "internal" 属性而不是局部变量，您也可以使用不同的方法通过函数创建公共 setters/getters。均已申请：

function defaultProperty(name) {
    return {
        set: function(val) {
            this[name] = val - 1; // Just an example
        },
        get: function() {
            return this[name] + 1; // Just an example
        }
    };
}

var myObj = Object.defineProperties({}, {
    foo: defaultProperty("_foo"),
    bar: defaultProperty("_bar")
});

使用相同的 getter 和 setter 创建多个属性

Create multiple properties with the same getters and setters

javascript

getter

setter

getter-setter

问题

实施

我的问题