gpt4 book ai didi

javascript - ES5/6 类中多个相同的 getter/setter 函数的好的解决方案?

转载 作者:行者123 更新时间:2023-11-30 14:56:27 25 4
gpt4 key购买 nike

我正在寻找一种优雅的方式来为 ES6 类中的多个属性声明相同的 getter/setter。

而不是拥有大量的:

  set prop_1(value){
this.prop_1 = value;
console.log(`set prop_1 = ${value} and calling updateroom`);
db.updateRoom(this, 'prop_1');
}

...

  set prop_n(value){
this.prop_n = value;
console.log(`set prop1 = ${value} and calling updateroom`);
db.updateRoom(this, 'prop_n');
}

我想在与其他 getter 和 setter 相邻的类定义中做一些更易于维护的事情:

['prop_1', 'prop_2' ... 'prop_n'].forEach(prop => {
set [prop](value) {
this[prop] = value;
console.log(`set ${prop} = ${value} and calling updateroom`);
db.updateRoom(this, prop);
}
});

但是当然不能在类定义中这样做,因为文字不是语法上允许的内容之一。

甚至不能在稍后通过例如声明后将 setter 添加到类定义中:

class Room {
// stuff
}

['initialised', 'type', 'owner'].forEach(prop => {
Object.defineProperty(Room, prop, {
set: function(value) {
this[prop] = value;
console.log(`set ${prop} = ${value} and calling updateroom`)
db.updateRoom(this, prop);
}
})

因为此时没有实例。

所以最终走上了装饰构造函数的神秘之路,这就意味着任何想弄清楚我之后到底想要实现什么的人都会头疼半个小时,而且会更加复杂。

我是不是遗漏了什么,有没有人想出一种优雅的方式来高效地编码而不重复 getter-setter?

最佳答案

I'd like to do something a little more maintainable like this in the class definition adjacent to the other getters and setters:

['prop_1', 'prop_2' ... 'prop_n'].forEach(prop => {
set [prop](value) {
this[prop] = value;
console.log(`set ${prop} = ${value} and calling updateroom`);
db.updateRoom(this, prop);
}
});

Can't even add the setters to the class definition after declaration later via e.g.:...as there is no instance at that point.

是的,但是您可以使用Object.defineProperty为此,设置将成为这些实例原型(prototype)的对象的属性 (Room.prototype)。在 class 声明之后:

class Room {
// ...
}

...您可以将这些 setter 添加到 Room.prototype:

['prop_1', 'prop_2'/* ... 'prop_n'*/].forEach(prop => {
Object.defineProperty(Room.prototype, prop, {
set: function(value) {
// ...save the value somewhere (*NOT* `this[prop] = value;`,
// which will call the setter again, resulting in a stack
// overflow error...
}
});
});

请记住,class 表示法主要是原型(prototype)继承的语法糖(但是,您知道,好的 糖)。您仍然有一个 Room.prototype 对象,在 class 声明之外向它添加内容是完全有效的。

实例 (在这个例子中,我只是将值存储在一个单独的 values 属性对象上):

class Room {
constructor() {
this.values = {};
}
}
['prop_1', 'prop_2', 'prop_n'].forEach(prop => {
Object.defineProperty(Room.prototype, prop, {
set: function(value) {
console.log(`set ${prop} = ${value}...`);
this.values[prop] = value;
},
get: function() {
return this.values[prop];
}
});
});

const r = new Room();
r.prop_1 = 42;
console.log("r.prop_1 = ", r.prop_1);
r.prop_2 = "Answer";
console.log("r.prop_2 = ", r.prop_2);

关于javascript - ES5/6 类中多个相同的 getter/setter 函数的好的解决方案?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47200788/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com