Proxy对象作用及拦截方法解析

Proxy 是 JavaScript 中强大而灵活的对象代理机制，它不存储数据，而是作为目标对象的拦截层，在属性读取、赋值、删除、函数调用等关键操作发生时插入自定义逻辑；通过 `new Proxy(target, handler)` 创建，并依赖 `Reflect` 方法确保语义正确与原型链行为一致；相比 `Object.defineProperty`，Proxy 能全面监听动态属性、数组操作、内置方法（如 `in`、`JSON.stringify`、`new`）等，但其陷阱（trap）之间存在隐式协作关系，稍有疏漏（如只改 `ownKeys` 未同步 `getOwnPropertyDescriptor`）便会导致行为不一致，加之运行时开销较大，实际应用中既需深入理解各 trap 的触发时机与约束，也需权衡功能与性能——掌握 Proxy，就是掌握了现代 JavaScript 元编程的核心钥匙。

Proxy 是什么：一个可拦截对象操作的包装器

Proxy 不是原始对象，而是一个代理层——你把目标对象交给它，它就能在读取、赋值、删除等操作发生时“插一脚”，执行你定义的逻辑。它本身不存储数据，所有操作最终都转发给内部的目标对象，但中间可以加钩子。

怎么创建 Proxy：new Proxy(target, handler)

必须传两个参数：target（要代理的原对象）和 handler（一个配置拦截行为的对象）。handler 里写各种 trap（陷阱），比如 get、set、has、deleteProperty 等。

常见错误：直接修改 handler 里的方法名拼错（如写成 gett），或漏写 return Reflect.get(...) 导致读取失效。

• target 可以是普通对象、数组、函数，甚至 null（但多数 trap 会报错）
• handler 至少得是个对象，哪怕为空 {}，否则报 TypeError: handler must be an object
• 不手动调用 Reflect 方法（如 Reflect.set(target, key, value, receiver)）会导致某些场景（如 setter、原型链访问）行为异常

const obj = { x: 1 };
const p = new Proxy(obj, {
  get(target, key) {
    console.log('读取', key);
    return Reflect.get(target, key); // 必须转发，否则返回 undefined
  },
  set(target, key, value) {
    console.log('设置', key, '=', value);
    return Reflect.set(target, key, value); // 必须返回布尔值
  }
});

常用 trap 场景与坑点

不是所有操作都有对应 trap，有些行为（如 for...in）会触发多个 trap（ownKeys + getOwnPropertyDescriptor），容易漏配。

• get 拦截属性读取：注意 receiver 参数（通常是 proxy 本身），影响 this 绑定
• set 必须显式返回 true 或 false；返回 false 且在严格模式下会抛 TypeError
• has 影响 in 操作符；若没定义，会退回到目标对象的自有属性检查
• construct 只对 new proxy(...) 有效，不能用于普通函数调用
• 数组的 length 修改、索引越界赋值等，可能触发 set，但不会触发 defineProperty

Proxy 和 Object.defineProperty 的关键区别

Object.defineProperty 只能监听**已存在**的属性，且对数组索引、新增属性完全无感；Proxy 是对整个对象做代理，支持动态属性、数组操作、甚至函数调用（apply）、instanceof（isInstance）等。

• Proxy 支持拦截 delete obj.key（deleteProperty），而 defineProperty 没有对应机制
• Proxy 可拦截 Object.keys()、JSON.stringify()（通过 ownKeys + getOwnPropertyDescriptor）
• Proxy 无法被 Object.isExtensible 等元操作绕过，但它的 handler 对象本身可被修改——这点常被忽略
• 性能上 Proxy 开销明显高于 defineProperty，尤其高频操作（如动画帧内反复读写）需谨慎

以上就是《Proxy对象作用及拦截方法解析》的详细内容，更多关于的资料请关注golang学习网公众号！