17370845950

Proxy 与 Reflect 是 JavaScript 元编程的天然搭档，Proxy 拦截行为，Reflect 提供标准化底层操作；必须配合使用以确保属性描述符、访问器、继承链和 receiver 正确性。

Proxy 和 Reflect 是 JavaScript 中实现元编程的两个核心机制：前者用于**拦截并重定义对象行为**，后者提供**标准化、可编程的对象底层操作接口**。它们不是替代品，而是天然搭档——几乎每个 Proxy 捕获器（trap）都应配合对应名称的 Reflect 方法来转发默认行为，否则极易破坏原型链、getter/setter 绑定或导致不可预期的静默失败。

为什么 set/get 拦截里必须用 Reflect.set/Reflect.get？

直接操作 target[property] = value 或 target[property] 看似简单，但会绕过属性描述符（如 writable: false、configurable: false）、忽略访问器（accessor）的 this 上下文，甚至在继承场景中丢失 receiver 引用，导致 getter/setter 内部的 this 指向错误目标对象。

• receiver 参数确保 getter/setter 中的 this 正确指向代理本身（而非原始 target），这对 Vue 响应式、MobX 等依赖 this 的库至关重要
• 不使用 Reflect.set() 时，返回值逻辑也不一致：原生赋值无返回值，而 set 捕获器必须显式返回 true（成功）或 false（失败，严格模式抛错）
• Reflect.get(target, prop, receiver) 是唯一能正确触发 Object.prototype.__proto__ 查找链和 Symbol 描述符的行为

const obj = {
  get name() { return this._name || 'Anonymous'; },
  set name(v) { this._name = v.toUpperCase(); }
};
const proxy = new Proxy(obj, {
  get(target, prop, receiver) {
    console.log(`GET ${prop}`);
    // ✅ 正确：保留 this 指向 proxy，触发访问器
    return Reflect.get(target, prop, receiver);
    // ❌ 错误：this 指向 target，_name 读写失效
    // return target[prop];
  }
});
console.log(proxy.name); // "Anonymous"（正确）

如何用 Proxy + Reflect 实现带类型校验的只读代理？

常见误区是只拦截 set 就认为“只读”，但忘了 deleteProperty、defineProperty、ownKeys 等也能破坏只读性；同时类型校验若不结合 Reflect，会导致非字符串值被静默丢弃或报错位置模糊。

• 必须拦截全部可变操作：set、deleteProperty、defineProperty、preventExtensions、setPrototypeOf
• 类型校验应在 set 中完成，但赋值动作仍需交由 Reflect.set() 执行，以保持属性描述符语义
• 对只读对象，get 拦截中调用 Reflect.get() 可确保访问器、Symbol 属性、继承属性正常工作

function createTypedReadOnly(obj, typeCheck = (v) => typeof v === 'string') {
  return new Proxy(obj, {
    set(target, prop, value, receiver) {
      if (!typeCheck(value)) {
        throw new TypeError(`Property '${String(prop)}' must be a string`);
      }
      // ✅ 转发给 Reflect，尊重 writable/configurable 等限制
      return Reflect.set(target, prop, value, receiver);
    },
    deleteProperty() { throw new TypeError('Cannot delete property'); },
    defineProperty() { throw new TypeError('Cannot define property'); },
    preventExtensions() { return true; }, // 已经不可扩展
    get(target, prop, receiver) {
      return Reflect.get(target, prop, receiver);
    }
  });
}

哪些高级场景离不开 Proxy + Reflect 配合？

单独使用 Proxy 或 Reflect 都无法完成这些任务，必须二者协同：

• 响应式系统：Vue 3 的 reactive() 在 get 中收集依赖，在 set 中触发更新；Reflect.get() 确保嵌套对象访问也进入代理链（避免“响应式断裂”）
• 透明缓存代理：在 get 中检查缓存，未命中则用 Reflect.get() 计算并缓存，避免重复执行副作用函数
• 安全沙箱：拦截 apply 和 construct，用 Reflect.apply() / Reflect.construct() 控制 this 和参数，防止恶意代码逃逸
• 调试与可观测性：所有操作统一走 Reflect，便于统一打点、计时、审计，而不会漏掉 in、for...in 等隐式操作

最常被忽略的一点是：Reflect 不只是“为了配合 Proxy”，它本身是 JavaScript 对象操作的**唯一正交接口**——Reflect.has() 比 prop in obj 更可靠（不触发原型上 getter），Reflect.ownKeys() 比 Object.keys() 多返回 Symbol 属性，且所有方法都明确返回布尔值或结果，没有副作用。写 Proxy 时不加 Reflect，就像开车不系安全带：一时省事，出问题时连 crash 日志都难定位。