js监听对象属性的变化

es5实现：

let obj = {
  name: "战三",
  age: "dddd",
  fo: "test",
};

Object.keys(obj).forEach((key) => {
  var value = obj[key];
  Object.defineProperty(obj, key, {
    get: function () {
      console.log(`${key}被访问了`);
      return value;
    },
    set: function (newValue) {
      console.log(`${key}的值被重新设置了`);
    },
  });
});
console.log(obj.name)

es6实现:

let objProxy = new Proxy(obj,{
    get:function(target,key,receiver) {
        //receiver是代理创建出来的对象
        console.log(`get方法被访问----`, key,receiver);
        console.log(receiver === objProxy);
        return  Reflect.get(target,key,receiver)
    }, 
    set:function(target, key, newValue,receiver) {
               //receiver是代理创建出来的对象
               console.log(`set方法被访问----`, key,receiver);
               console.log(receiver === objProxy);
               Reflect.set(target, key,newValue,receiver)
    }
})

console.log(objProxy.name, objProxy.age);

objProxy.name = '修改后的值'
// 战三 dddd
// set方法被访问---- name { name: [Getter/Setter], age: [Getter/Setter], fo: [Getter/Setter] }
// true
// name的值被重新设置了