17370845950

Proxy 是 JavaScript 中用于拦截和自定义对象基本操作的代理机制，但仅对显式创建的代理对象生效，无法拦截原始对象；仅支持特定 trap（如 get、set），且需配合 Reflect 方法保持语义正确。

Proxy 是什么？它真能拦截所有对象操作吗？

不能。Proxy 只能拦截对代理对象本身的操作，不作用于原始对象；且仅对明确支持的 trap（如 get、set、has、deleteProperty 等）生效。像直接读取原型链上的属性、或调用未被拦截的方法（如 Object.keys()），不会触发对应 trap。

必须用 new Proxy(target, handler) 显式创建代理，原对象不受影响。常见误操作是：改了 target 却忘了操作的是 proxy，结果发现拦截没生效。

哪些操作必须搭配 Reflect 使用才合理？

绝大多数 trap 的默认行为应委托给 Reflect 对应方法，否则容易破坏语言语义。比如手动实现 set 时漏掉 Reflect.set() 返回值（布尔值），会导致严格模式下赋值失败却无报错。

• get / set 应调用 Reflect.get() / Reflect.set()，而非直接访问 target[key] —— 否则绕过原型链查找、忽略 getter/setter
• apply 和 construct 必须返回实际执行结果，要用 Reflect.apply() 或 Reflect.construct()
• ownKeys 若返回非数组、或包含非法键名（如重复字符串、Symbol 以外的非字符串），会直接抛 TypeError

常见拦截失败场景与修复方式

以下情况看似该拦截，实则不会触发 trap：

• 对代理对象解构：const { x } = proxy → 触发 get，但若 x 是 undefined 且没定义 getter，就不会进 get 的逻辑体（因为没真正读取）
• for...in 遍历 → 拦截的是 ownKeys + has，不是 get；若 ownKeys 没返回该属性，遍历时就看不到
• Object.getOwnPropertyDescriptor(proxy, 'x') → 触发 getOwnPropertyDescriptor，不是 get；不定义该 trap 就走默认逻辑
• 使用 Array.prototype.push 修改代理数组 → 实际触发 set（索引位）和 set（length），但若 handler 里没处理数字索引或 length，就静默失败

一个带类型校验的 set 拦截示例

下面代码限制对象只允许写入 string 类型的值，并拒绝 undefined 或 null：

const target = {};
const proxy = new Proxy(target, {
  set(obj, key, value) {
    if (value === null || value === undefined) {
      console.warn(`拒绝设置 ${key}: 值不能为 null 或 undefined`);
      return false; // 拦截赋值
    }
    if (typeof value !== 'string') {
      console.warn(`拒绝设置 ${key}: 期望 string，得到 ${typeof value}`);
      return false;
    }
    return Reflect.set(obj, key, value); // 必须返回 true/false
  }
});

proxy.name = 'Alice'; // ✅ 正常
proxy.age = 42;       // ❌ 警告，赋值失败
console.log(proxy.name); // 'Alice'
console.log(proxy.age);  // undefined

注意：return false 在严格模式下会抛 TypeError，生产环境建议统一用 throw 显式报错，避免静默失败难以调试。