JS监听对象属性改变

简介: 设想这么一个需求: user.name = '张三' 对user数据进行操作的时候,同步的修改页面上的用户名为张三。 这就是个数据绑定的概念。   针对这类需求 ES5提供了Object.

 设想这么一个需求:

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

 

目录
相关文章
|
5天前
|
JavaScript
JS 获取对象数据类型的键值对的键与值
JS 获取对象数据类型的键值对的键与值
|
15天前
|
JavaScript 前端开发
Math对象:JavaScript中的数学工具
Math对象:JavaScript中的数学工具
26 1
N..
|
22天前
|
存储 JavaScript 前端开发
JavaScript中的对象
JavaScript中的对象
N..
10 0
|
8天前
|
JavaScript 算法
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
|
5天前
|
JavaScript
js 字符串String转对象Object
该代码示例展示了如何将一个以逗号分隔的字符串(`'1.2,2,3,4,5'`)转换为对象数组。通过使用`split(',')`分割字符串并`map(parseFloat)`处理每个元素,将字符串转换成浮点数数组,最终得到一个对象数组,其类型为`object`。
|
13天前
|
存储 JavaScript 前端开发
在浏览器中存储数组和对象(js的问题)
在浏览器中存储数组和对象(js的问题)
N..
|
22天前
|
缓存 JavaScript 前端开发
Vue.js的计算属性
Vue.js的计算属性
N..
11 2
N..
|
22天前
|
JavaScript 前端开发 数据处理
Vue.js的过滤器和监听属性
Vue.js的过滤器和监听属性
N..
16 1
|
23天前
|
存储 JavaScript 索引
js开发:请解释什么是ES6的Map和Set,以及它们与普通对象和数组的区别。
ES6引入了Map和Set数据结构。Map的键可为任意类型,有序且支持get、set、has、delete操作;Set存储唯一值,提供add、delete、has方法。两者皆可迭代。示例展示了Map和Set的基本用法,如添加、查询、删除元素。
13 2
|
26天前
|
JavaScript 前端开发
JavaScript操作BOM对象
JavaScript操作BOM对象
8 1