无需登录 数据私有 本地保存

Proxy 对象拦截测试 - 查看 get/set 钩子触发

JavaScript 开发工具 Proxy 拦截 测试
12
0
0
0

Proxy 对象拦截测试

实时观察 get / set / deleteProperty / has 陷阱触发
目标对象 (JSON)
未创建
属性浏览器
请先创建 Proxy 对象
快速操作
0
GET
0
SET
0
DELETE
0
HAS
全部 GET SET DELETE HAS
拦截日志
操作 Proxy 对象后，日志将显示在这里

常见问题 & 知识点

什么是 JavaScript Proxy？
Proxy 是 ES6 引入的一个内置对象，允许你创建一个对象的代理，从而拦截和自定义对该对象的基本操作（如属性读取、赋值、删除等）。它接收两个参数：目标对象（target）和处理器对象（handler），handler 中定义了一系列陷阱（trap）函数来拦截操作。
get 陷阱和 set 陷阱分别拦截什么？
get(target, property, receiver)：拦截对属性的读取操作，包括点语法和方括号语法。可以在此记录访问日志、实现惰性加载、数据脱敏等。
set(target, property, value, receiver)：拦截对属性的赋值操作。常用于数据验证、类型检查、双向绑定等场景。set 必须返回 true 表示赋值成功，返回 false 在严格模式下会抛出 TypeError。
Proxy 有哪些常见使用场景？
① 数据验证：在 set 中校验数据类型和范围；② 日志与调试：记录所有对象操作；③ 响应式框架：Vue 3 使用 Proxy 实现响应式；④ API 抽象：如将 REST API 调用伪装成对象属性访问；⑤ 性能优化：实现惰性加载和缓存；⑥ 安全防护：防止属性被意外修改或访问。
Proxy 与 Object.defineProperty 的区别？
Proxy 是更强大和灵活的方案：它能拦截13 种基本操作（包括 delete、in、Object.keys 等），而 Object.defineProperty 只能拦截 get/set。Proxy 可以代理整个对象而非单个属性，也能代理数组。Vue 2 使用 Object.defineProperty 实现响应式，Vue 3 改为使用 Proxy 正是因为这个原因。
什么是 Reflect？它与 Proxy 有什么关系？
Reflect 是一个内置对象，提供了与 Proxy 陷阱一一对应的静态方法（如 Reflect.get、Reflect.set）。在 Proxy handler 中，通常使用 Reflect 来执行默认操作，确保行为与普通对象一致。例如在 get 陷阱中调用 Reflect.get(target, property, receiver) 来获取原始值，同时保持原型链的正确性。
Proxy 对性能有影响吗？
Proxy 会带来一定的性能开销，每次拦截操作都需要额外的函数调用。在大多数应用中这个开销可以忽略不计，但在高频操作（如游戏循环、大量 DOM 更新）中需要注意。建议对性能敏感的场景进行基准测试，必要时可以对静态数据跳过代理。
深度代理（Deep Proxy）是如何实现的？
深度代理指不仅代理目标对象本身，还递归代理其嵌套的子对象。实现方式是在 get 陷阱中判断返回值是否为对象，如果是则返回一个新的 Proxy 实例。本工具演示的正是这种深度代理模式，访问 obj.a.b.c 会依次触发三次 get 拦截，每次返回更深层的代理对象。
🔧 相关工具