JavaScript代理与反射使用教程

JavaScript 中的 Proxy 和 Reflect 是一对紧密协作的核心机制：Proxy 通过可定制的“陷阱”方法拦截对象的各种操作（如读取、赋值、函数调用），实现对对象行为的精细控制；Reflect 则提供与之完全对应、统一可靠的标准方法，专为在 Proxy 陷阱中安全执行默认行为而设计。二者结合不仅让数据验证、响应式系统、日志追踪等高级模式变得简洁可维护，还规避了传统 Object 方法的不一致性与潜在陷阱，是现代 JavaScript 元编程和框架底层能力的关键基石——掌握它们，意味着真正掌握了操控对象行为的主动权。

JavaScript 中的代理（Proxy）和反射（Reflect）是一对协作机制：Proxy 用于拦截对象操作，Reflect 提供一套标准化的方法来执行这些操作。它们共同让开发者能精细控制对象行为，比如读取、赋值、删除属性，甚至函数调用。

Proxy 是如何拦截对象操作的？

Proxy 构造函数接收两个参数：目标对象（target）和处理器对象（handler）。handler 是一个包含“陷阱”（traps）方法的对象，每个方法对应一种对象操作。当对代理对象执行相应操作时，就会触发对应的 trap。

• 常见陷阱示例： get 拦截属性读取，set 拦截赋值，has 拦截 in 操作符，deleteProperty 拦截 delete 操作，apply 拦截函数调用。
• 必须显式转发： 大多数 trap 不会自动执行原操作；若需保留默认行为，通常要调用 Reflect 上的对应方法（如 Reflect.get(target, key, receiver)）。
• 不可撤销（除非手动封装）： Proxy 创建后默认不可撤销；可通过封装加一层判断逻辑实现“关闭”效果，或使用 new Proxy(target, handler) 配合闭包状态控制。

Reflect 是什么？为什么它和 Proxy 配合使用？

Reflect 是一个内置对象，提供静态方法（如 Reflect.get、Reflect.set），功能与 Object 方法或操作符类似，但设计更统一、返回更可靠（例如失败时返回 false 而非抛错），且专为 Proxy trap 设计。

• 统一接口： Reflect.defineProperty(obj, key, desc) 比 Object.defineProperty 更一致——所有方法都以目标对象为第一参数，避免 this 绑定混乱。
• 天然适配 Proxy： 每个 Reflect 方法名与 Proxy trap 一一对应，参数顺序也匹配，方便在 trap 中直接调用，完成默认行为。
• 更安全的底层操作： 例如 Reflect.has(target, 'x') 等价于 'x' in target，但不会触发原型链上的 hasOwnProperty 意外覆盖；Reflect.apply(f, thisArg, args) 比 f.apply(thisArg, args) 更可控。

一个实用例子：带验证的可观察对象

用 Proxy + Reflect 实现一个给属性赋值前校验类型、并通知变更的对象：

const createValidatedObservable = (obj, validators = {}) => {
  return new Proxy(obj, {
    set(target, key, value, receiver) {
      const validator = validators[key];
      if (validator && !validator(value)) {
        throw new Error(`Invalid value for ${key}: ${value}`);
      }
      console.log(`Setting ${key} =`, value);
      return Reflect.set(target, key, value, receiver);
    },
    get(target, key, receiver) {
      console.log(`Getting ${key}`);
      return Reflect.get(target, key, receiver);
    }
  });
};

const person = createValidatedObservable(
  { name: 'Alice', age: 30 },
  { age: (v) => typeof v === 'number' && v >= 0 }
);
person.age = 31; // ✅ 日志输出 + 成功赋值
person.age = 'old'; // ❌ 抛出错误

注意事项和限制

• 不能代理非对象： Proxy 只接受 object、function、array 等对象类型；原始值（如 42、'hi'）会报错。
• 部分操作无法完全拦截： 例如 Object.prototype.toString.call(proxy) 仍返回原对象类型字符串；某些内部方法（如 [[GetPrototypeOf]]）受引擎保护，行为受限。
• 性能开销存在： 每次访问都经过 trap，高频操作（如循环中频繁读属性）可能影响性能，应按需使用。
• 严格模式影响： 在严格模式下，set trap 若返回 false 会抛 TypeError；非严格模式则静默失败。

以上就是《JavaScript代理与反射使用教程》的详细内容，更多关于的资料请关注golang学习网公众号！