JavaScript代理模式：Proxy拦截属性访问详解

JavaScript 的 Proxy 是实现代理模式的强大工具，它通过 target 和 handler 构建可拦截的代理对象，尤其擅长在属性读取（get）和赋值（set）等关键操作中注入自定义逻辑——无论是构建响应式系统（如 Vue 3）、实现运行时校验、自动填充默认值，还是记录访问日志，Proxy 都能以简洁优雅的方式增强对象行为；不过需注意其仅适用于对象、默认为浅层代理，且需配合 Reflect API 正确转发操作，才能兼顾灵活性与可靠性。

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 调整

今天关于《JavaScript代理模式：Proxy拦截属性访问详解》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！