JS監聽對象屬性改變

 設想這麼一個需求：

user.name = '張三'

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

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

 

針對這類需求

ES5提供了Object.defineProperty函數

使用方式以下所示:

1 Object.defineProperty(user, 'name', {
2     set:function(key,value){
3           //此處攔截了設置請求
4     }
5 
6 });

 

可是，若是爲user增長一個新的屬性，好比user裏沒有id屬性，增長一個 user.id=1，Object.defineProperty函數是不知道存在'id'的，也就沒法寫出上面的代碼，這能夠用ES6提供的Proxy代理處理，代碼以下：

 

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