JS監聽對象屬性改變

 設想這么一個需求：

user.name = '張三'

對user數據進行操作的時候，同步的修改頁面上的用戶名為張三。

這就是個數據綁定的概念。

 

針對這類需求

ES5提供了Object.defineProperty函數

使用方式如下所示:

Object.defineProperty(user, 'name', {
    set:function(key,value){
          //此處攔截了設置請求
    }

});

 

但是，如果為user增加一個新的屬性，比如user里沒有id屬性，增加一個 user.id=1，Object.defineProperty函數是不知道存在'id'的，也就無法寫出上面的代碼，這可以用ES6提供的Proxy代理處理，代碼如下：

 

var user = new Proxy({},{
     set:function(target,key,value,receiver){
       //處理代碼
     }
})