使用es6 proxy 自动监听对象

最新推荐文章于 2023-06-27 14:36:53 发布

Pany丨

最新推荐文章于 2023-06-27 14:36:53 发布

阅读量2.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： ES6 文章标签： es6 proxy 自动监听对象

本文链接：https://blog.youkuaiyun.com/panyang01/article/details/65471856

ES6 专栏收录该内容

2 篇文章

订阅专栏

本文探讨如何利用ES6的Proxy代理实现对象变化的自动监听。通过get和set方法，Proxy能拦截对象属性的读取和修改，提供一种有效的监控机制。在实践中，Proxy的使用帮助捕获并响应对象的变动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用 proxy代理去实现自动监听对象对否发生改变。

网上查阅资料后，有如下几种实现方式

//定义被侦听的目标对象
var engineer = { name: 'Lily', age: 20 };
//定义处理程序
var interceptor = {
    set: function (receiver, property, value) {
        console.log(property, 'is changed to', value);
        receiver[property] = value;
    }
};
//创建代理以进行侦听
new Proxy(engineer, interceptor);
//做一些改动来触发代理
engineer.age = 30;//age is changed to 60
engineer.age = 10;//age is changed to 60

实际操作之后，控制台未打印任何任何数据。也就是监听并未生效。

//定义被侦听的目标对象
var engineer = { name: 'Lily', age: 20 };
//定义处理程序
var interceptor = {
    set: function (receiver, property, value) {
        console.log(property, 'is changed to', value);
        receiver[property] = value;
    }
};
//创建代理以进行侦听
engineer = new Proxy(engineer, interceptor);
//做一些改动来触发代理
engineer.age = 30;//age is changed to 60
engineer.age = 10;//age is changed to 60

实际操作之后，结果如下：

//定义被侦听的目标对象
var engineer = { name: 'Lily', age: 20 };
//定义处理程序
var interceptor = {
    set: function (receiver, property, value) {
        console.log(property, 'is changed to', value);
        receiver[property] = value;
        return Reflect.set(receiver, property, value);   
    }
};
//创建代理以进行侦听
engineer = new Proxy(engineer, interceptor);
//做一些改动来触发代理
engineer.age = 30;//age is changed to 60
engineer.age = 10;//age is changed to 60

实际操作之后，结果正常显示：

实现原理个人理解为：
Proxy代理，能够拦截了直接改变对象的动作和操作，并作出判断和响应。
其中：
get 方法：是当对象属性被访问时触发
set 方法：是当对象属性被修改时触发
更多方法，请点击：Javascript/ES6代理Proxy用法点击查看

第二个实例中的报错，是因为engineer = new Proxy()后，再去操作engineer .age已经找不到原来的key值，
而return Reflect.set(receiver, property, value); 则让engineer重新指向原来的对象模型。
详细请查看：ES6新特性：Javascript中的Reflect对象点击查看详情