修改对象属性后如何触发回调？

Question

如果我有像这样的课程：

class Myclass {
    constructor(){
        this.a = [];
        this.sum = 0;
    }

    update(){
       this.sum = this.a.reduce((a, b) => a + b, 0)
    }
}

我实例化该类：

myClass = new Myclass();

我在a属性后附加了一个数字

myClass.a.push(1);
myClass.a.push(2);

每次修改a属性时如何调用更新方法？换句话说，当对象属性更改时，如何触发回调？

Answer 1

将新项目推送到a数组的添加方法，例如：

class Myclass {
    constructor(){
        this.a = [];
        this.sum = 0;
    }

    update(){
       this.sum = this.a.reduce((a, b) => a + b, 0)
    }

    pushItem(val) {
        this.a.push(val);
        this.update();
    }

}

myClass = new Myclass();
myClass.pushItem(1);
myClass.pushItem(2);
console.log(myClass.sum);

Answer 2

一种方法是扩展Array并隐藏push方法。

class MyArray extends Array{
  constructor(ref){
    super();
    this.ref = ref
  }
  push(value){
    super.push(value)
    this.ref.update()
    console.log("called")
  }
}

class Myclass {
    constructor(){
        this.a = new MyArray(this);
        this.sum = 0;
    }
   
    update(){
       this.sum = this.a.reduce((a, b) => a + b, 0)
    }
}

let myClass = new Myclass()
myClass.a.push(1);
myClass.a.push(2);

console.log(myClass.sum)

P.S：-如果您在插入后不使用求和值，那么在每次插入时调用回调当然不是一个好主意。

Answer 3

也许通过将对象组织为

Answer 4

检查ES6 Proxies是否比简单的获取器/设置器更强大。