检查某个类的对象的值是否已被更改

Question

我需要检查一个对象的元素是否已被更改并根据它更改另一个值。

例如：

class myClass{
  constructor(value1, value2){
    this.value1 = value1
    this.value2 = value2
    this.values = {
      value1: this.value1,
      value2: this.value2
    }
  }
}

var myObject = new myClass(2,4)
console.log(myObject.value1, myObject.values)

myObject.value1++ // ou myObject.value1 = 3
//expected log 3 {"value1": 3, "value2": 4}
console.log(myObject.value1, myObject.values)

Answer 1

如果你想动态处理一个对象的所有属性，那么你可以使用 Proxy 而不是分开的 setter 和 getter。

class myClass{
  constructor(value1, value2){
    this.value1 = value1
    this.value2 = value2
    this.values = {
      value1: this.value1,
      value2: this.value2
    }
  }
}

var myObject = new myClass(2,4);

var proxied = new Proxy(myObject, {
  get(target, prop) {
    return Reflect.get(prop === "values" ? target : target.values, prop);
  },
  set(target, prop, value) {
    return Reflect.set(prop === "values" ? target : target.values, prop, value);
  }
});

proxied.value1++ // ou myObject.value1 = 3
proxied.value2 = 1000;
console.log("proxy", proxied);

Answer 2

使myClass 实例成为单一事实来源。

class myClass{
  constructor(value1, value2){
    this.value1 = value1
    this.value2 = value2
    const container = this;
    
    this.values = {
      get value1() {
        return container.value1
      },
      get value2() {
        return container.value2
      }
    }
  }
}

var myObject = new myClass(2,4)
console.log(myObject.value1, myObject.values)

myObject.value1++ // ou myObject.value1 = 3
//expected log 3 {"value1": 3, "value2": 4}
console.log(myObject.value1, myObject.values)