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) // 第一個參數為監聽的對象，第二個參數為改寫的方法