js监听对象属性的改变

在ES5中，通过defineProperty()进行监听

• 假设对user对象的name属性进行监听，当设置name属性值时，会执行相应的函数

Object.defineProperty(user, 'name', {
    set : funtion(value){
               name = value;
                console.log('set: name:' + value)
        }
})

当需要设置对象中多个属性时，使用defineProperties()进行监听

Object.defineProperties(obj,{
  a : {
        configurable: true, // 设置属性可以更改，默认为false
        set : function(value){}
  },      
   b : {
       configurable: true, // 设置属性可以更改，默认为false
        set : function(value){}
  }
} 
})

 

在ES6中，通过Proxy实现

funtion handle(){
   // 改写set方法，监听设置
    set: funtion(){},
    get: funtion(){}
}

let p = new Proxy({},handle) // 第一个参数为监听的对象，第二个参数为改写的方法