17370845950

Proxy 是可拦截对象操作的代理包装器，它不存储数据而转发操作给目标对象，并通过 handler 中的 trap（如 get、set）插入自定义逻辑；创建需 new Proxy(target, handler)，且常用陷阱需配合 Reflect 方法确保行为正确。

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 的真正复杂点不在语法，而在 trap 之间的协作关系：比如改了 ownKeys 却没同步更新 getOwnPropertyDescriptor，for...in 和 Object.getOwnPropertyNames 就会表现不一致。这类隐式依赖，调试时最难定位。