JavaScript代理模式_拦截器实现-js教程-PHP中文网

JavaScript代理模式_拦截器实现

夜晨

发布： 2025-11-26 15:37:22

原创

646人浏览过

Proxy是ES6提供的代理对象，通过new Proxy(target, handler)创建代理，拦截属性访问、赋值、函数调用等操作。例如：get陷阱可记录读取日志或返回默认值；set陷阱可用于数据验证与响应式更新；apply陷阱能监控函数调用参数与结果；has和deleteProperty可控制私有属性安全。实际中可用于实现自动认证请求拦截、AOP切面编程等。需注意仅能代理对象、存在性能开销及兼容性限制。结合Reflect可增强代理完整性。

javascript代理模式_拦截器实现

JavaScript 中的代理模式通过 Proxy 构造函数实现，可以对对象的操作进行拦截和自定义处理。这种机制非常适合用来实现拦截器，比如在访问属性、修改属性、调用方法等操作前加入逻辑控制、日志记录、权限校验等。

什么是 Proxy 代理

Proxy 是 ES6 引入的一个内置对象，用于创建一个对象的代理，从而实现基本操作的拦截和自定义。语法如下：

const proxy = new Proxy(target, handler);

target：要被代理的对象。
handler：一个对象，定义了代理的行为（即拦截器），比如 get、set、apply 等陷阱（traps）。

常见拦截操作示例

下面是一些常用的拦截方式及其应用场景：

1. 拦截属性读取（get）

立即学习“Java免费学习笔记（深入）”；

当访问对象属性时触发，可用于数据绑定、默认值返回、日志输出等。

2. 拦截属性设置（set）

当设置属性值时触发，适合做数据验证、更新视图、通知机制等。

简单库存管理系统

本系统是一个基于工厂模式的三层架构项目，基于VS2005 开发，结构简洁，配合动软Codematic代码生成器，可以使开发效率事半功倍，倍感轻松。本系统主要功能 1，物品类别管理实现了物品类别的添加、修改、删除功能，方便库存物品分类管理。 2，物品管理实现物品添加、修改，管理员可实时对物品做出库、入库记录，也可查看详细历史出入库记录。 3，商家管理实现商家添加、修改、删除功能，方便公司和客户

查看详情

const data = {}; const reactiveData = new Proxy(data, { set(target, property, value) { console.log(`设置属性 ${property} 为 ${value}`); target[property] = value; // 可在此处触发 UI 更新或事件通知 return true; } }); reactiveData.count = 1; // 输出：设置属性 count 为 1 reactiveData.count++; // 输出：设置属性 count 为 2

3. 拦截函数调用（apply）

适用于代理函数，可以在函数执行前后插入逻辑，如参数校验、耗时统计等。

4. 拦截 in、deleteProperty 等操作

可以控制属性是否可枚举、可删除等。

const securedObj = { _secret: '私密信息', public: '公开信息' }; const secureProxy = new Proxy(securedObj, { has(target, prop) { if (prop.startsWith('_')) return false; return prop in target; }, deleteProperty(target, prop) { if (prop.startsWith('_')) { console.log('禁止删除私有属性'); return false; } delete target[prop]; return true; } }); console.log('_secret' in secureProxy); // false delete secureProxy._secret; // 输出：禁止删除私有属性