17370845950

Proxy是JS唯一能拦截对象底层操作的机制，可拦截get、set、has等13种操作但不包括原型方法调用或JSON.stringify；Reflect提供与之对应的标准化函数，确保语义一致且避免递归等问题。

Proxy 不是语法糖，它是 JS 唯一能拦截对象底层操作的机制；Reflect 不是新功能，它是把原本散落在 Object 上、语言内部的那些操作，统一成可调用的函数。

Proxy 能拦截哪些操作？

Proxy 通过 handler 对象定义拦截行为，每个 trap（陷阱）对应一个底层操作。常见且实用的包括：

• get：读取属性（obj.x、obj['x']），也拦截 in 操作符和 for...in 中的键访问（需配合 ownKeys）
• set：赋值（obj.x = 1），注意：严格模式下若返回 false 会抛 TypeError
• has：拦截 in 操作符（'x' in obj）
• deleteProperty：拦截 delete obj.x
• ownKeys：拦

  

  截 Object.getOwnPropertyNames()、Object.keys()、for...in 等枚举行为
• getOwnPropertyDescriptor：拦截 Object.getOwnPropertyDescriptor()
• defineProperty：拦截 Object.defineProperty()
• apply 和 construct：仅对函数/类有效，分别拦截函数调用和 new 实例化

不是所有操作都能被拦截——比如 obj.toString() 走的是原型链查找，除非你也在 get 里重写 toString 的返回值，否则不会触发 trap。

为什么 Reflect 要和 Proxy 配合用？

不用 Reflect，你得手动调用底层操作，容易出错或绕过预期逻辑。比如在 set 中想“先校验再赋值”，直接写 target[key] = value 可能触发无限递归（如果 target 本身也是 proxy）或忽略 setter。

Reflect 提供了一套与 Proxy traps 一一对应的静态方法，它们：

• 返回布尔值或描述符等标准结果（Reflect.set() 返回 true/false，而不是 undefined）
• 不修改 this 或原型链，纯函数式调用
• 能正确处理私有字段、不可写属性等边界情况

const target = { x: 1 };
const handler = {
  set(target, key, value, receiver) {
    if (key === 'x' && typeof value !== 'number') {
      throw new TypeError('x must be number');
    }
    // ✅ 正确：用 Reflect.set 保证语义一致，且支持 receiver（用于 super 或代理链）
    return Reflect.set(target, key, value, receiver);
    // ❌ 错误：target[key] = value 可能跳过 setter、不触发原型代理、无法控制 receiver
  }
};
const proxy = new Proxy(target, handler);

哪些操作 Proxy 拦不住？

Proxy 是“对象层级”的拦截，它不介入语言更底层的执行机制：

• 无法拦截属性是否存在判断以外的原型访问——比如 obj.__proto__ 读取本身不走 get，但修改会走 set
• 无法拦截 Object.prototype.toString.call(obj) 这类显式原型方法调用（但可以代理 obj.toString()，因它触发 get）
• 无法拦截数组的 .length 变更引发的元素删除（如 arr.length = 0），这属于引擎内部算法，只能靠 set 拦截对 length 的赋值本身
• 不能拦截 JSON.stringify() 的序列化过程——它不通过属性访问器，而是直接读取内部槽（[[Enumerable]] 等），需靠 ownKeys + getOwnPropertyDescriptor 配合控制可见性

真正难处理的，是那些「不经过属性访问路径」的操作。这时候 Proxy 不是失效，而是根本没机会介入——你得换思路，比如用封装、冻结、或运行时检测替代。