JS监听对象属性改变
2017-03-13 17:10
399 查看
设想这么一个需求:
user.name = '张三'
对user数据进行操作的时候,同步的修改页面上的用户名为张三。
这就是个数据绑定的概念。
针对这类需求
ES5提供了Object.defineProperty函数
使用方式如下所示:
但是,如果为user增加一个新的属性,比如user里没有id属性,增加一个 user.id=1,Object.defineProperty函数是不知道存在'id'的,也就无法写出上面的代码,这可以用ES6提供的Proxy代理处理,代码如下:
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){ //处理代码 } })
相关文章推荐
- js玩具——UI组件:PropertyChangeEvent 属性改变事件对象
- JS技术(4)---定义对象,添加函数,改变对象属性
- KVC 监听某对象属性值的改变
- RxSwift 中监听对象属性改变的方式小结:rx_observe, PublishSubject 和 Variable
- vue.js 中如何监听watch:{}对象中的某个属性的变化,做相应的操作
- 原生js 对象属性监听,对象重写,defineProperty getter setter
- js访问xml之节点对象属性和方法【1】
- js入门·对象属性方法大总结
- js入门·对象属性方法大总结
- 转"js入门·对象属性方法大总结"
- js-window对象的方法和属性资料
- js入门·循环与判断/利用函数的简单实例/使用对象/列举对象属性的名称
- js入门·对象属性方法大总结
- Thin的DateChooser代码学习(关于js的函数参数为一个完整的函数以及“对象不支持此属性或方法”错误的解决)(原创,转载请声明)
- js入门·对象属性方法大总结
- js-window对象的方法和属性资料
- [转]js鼠标及对象坐标控制属性
- JS应用DOM入门(2):DOM的对象属性
- js对象,属性集锦之二
- js入门·循环与判断/利用函数的简单实例/使用对象/列举对象属性的名称