JavaScript如何实现代理模式_JavaScript Proxy对象如何拦截属性访问

Proxy 是 JavaScript 中用于实现代理模式的核心机制，通过 target 和 handler 创建代理对象，用 get/set 等 trap 拦截属性访问与赋值，支持响应式、校验、默认值等场景，但仅适用于对象且为浅层代理。

JavaScript 中的 Proxy 对象是实现代理模式的核心机制，它允许你创建一个代理对象来拦截并自定义对目标对象的基本操作（如读取、赋值、枚举、函数调用等）。最关键的用途之一就是拦截属性访问——比如 obj.prop 或 obj['prop']。

Proxy 基本结构：target + handler

创建 Proxy 需要两个参数：目标对象（target）和处理器对象（handler）。handler 是一个配置对象，里面定义各种“陷阱”（traps），即拦截方法。要拦截属性读取，主要用 get；拦截设置，用 set。

示例：

const target = { name: 'Alice', age: 30 };
const handler = {
  get(obj, prop, receiver) {
    console.log(`正在读取属性: ${prop}`);
    return Reflect.get(obj, prop, receiver);
  },
  set(obj, prop, value, receiver) {
    console.log(`正在设置 ${prop} = ${value}`);
    return Reflect.set(obj, prop, value, receiver);
  }
};

const proxy = new Proxy(target, handler);
proxy.name; // 输出：正在读取属性: name → "Alice"
proxy.age = 31; // 输出：正在设置 age = 31 → true

拦截属性访问的常用 trap：get 和 set

get 陷阱在访问任意属性时触发，包括点号访问、方括号访问、解构、in 操作符（需配合 has）、Object.keys 等（但注意：这些不直接走 get，需配合其他 trap）。

• obj[prop]、obj.prop → 触发 get
• 赋值操作 obj.prop = val → 触发 set
• prop in obj → 触发 has（需显式定义）
• delete obj.prop → 触发 deleteProperty

务必使用 Reflect.get/set 转发操作，否则可能绕过原型链或破坏默认行为。

实用场景举例：响应式数据、属性校验、默认值

Proxy 不只是“拦截”，更是“增强语义”。常见落地方式：

• 响应式系统基础：Vue 3 的 reactive 就基于 Proxy，在 get 中收集依赖，set 中触发更新
• 访问控制与日志：记录谁在什么时候读了哪个字段，用于调试或审计
• 自动补全默认值：当读取不存在的属性时返回预设默认值（而非 undefined）
• 运行时类型/格式校验：在 set 中检查值是否符合规则（如 age 必须为正整数）

例如提供安全默认值：

const withDefaults = (target, defaults = {}) => 
  new Proxy(target, {
    get(obj, prop) {
      if (prop in obj) return obj[prop];
      return defaults[prop] ?? null;
    }
  });

const user = withDefaults({ name: 'Bob' }, { age: 25, role: 'user' });
console.log(user.name); // "Bob"
console.log(user.role); // "user"（来自 defaults）

注意事项与限制

Proxy 无法代理原始值（如字符串、数字），只能代理对象（包括数组、函数、Date 等）；且代理只对直接操作生效，不递归代理嵌套对象——需要手动实现深层代理（例如在 get 中对返回的对象再次 wrap）。

• Proxy 是浅层的：修改 proxy.nested.prop 不会自动代理 nested 对象本身
• 不能代理 undefined 或 null；传入非对象会抛错
• 代理后的对象与原对象不相等（proxy !== target）
• 某些内置行为（如 instanceof、Array.isArray）仍以目标对象为准，可通过 getPrototypeOf / isExtensible 等 trap 调整