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){
       //处理代码
     }
})

 

posted @ 2017-03-13 17:10  荒土  阅读(14266)  评论(0编辑  收藏  举报