JavaScript Proxy 是什么？如何拦截对象操作

JavaScript 中的 Proxy 是一个强大而灵活的对象代理机制，它允许你拦截并自定义对象的几乎所有基本操作（如读取、赋值、删除、枚举等），相比传统的 Object.defineProperty，Proxy 不仅支持动态属性、数组索引和原型链操作，还能以声明式方式统一控制行为，广泛应用于响应式系统、只读封装、数据验证、日志追踪和权限管控等实际场景——掌握 Proxy，意味着你拥有了精细操纵 JavaScript 对象行为的“上帝视角”。

Proxy 是 JavaScript 中用于拦截并自定义对象基本操作的构造器。它不修改原对象，而是创建一个“代理”，把对目标对象的访问（比如读取属性、赋值、删除、遍历等）全部重定向到你定义的处理函数中，从而实现细粒度的控制和响应式逻辑。

Proxy 的基本结构：target + handler

创建 Proxy 需要两个参数：

• target：要代理的原始对象（可以是普通对象、数组、函数，甚至另一个 Proxy）
• handler：一个配置对象，里面定义各种“陷阱”（trap），即你想拦截的操作方法，如 get、set、has、deleteProperty、ownKeys 等

示例：拦截属性读取和赋值

const obj = { name: 'Alice', age: 25 };
const proxy = new Proxy(obj, {
  get(target, prop) {
    console.log(`读取属性: ${prop}`);
    return target[prop];
  },
  set(target, prop, value) {
    console.log(`设置 ${prop} = ${value}`);
    target[prop] = value;
    return true; // 必须返回 true 表示赋值成功
  }
});

proxy.name;     // 输出：读取属性: name → "Alice"
proxy.city = 'Beijing'; // 输出：设置 city = Beijing

常用拦截方法及典型用途

每个 trap 对应一种对象操作，下面是高频使用的几个：

• get(target, prop, receiver)：拦截读取属性。可用于默认值、计算属性、日志、权限检查
• set(target, prop, value, receiver)：拦截赋值。常用于数据校验、触发更新、防止非法写入
• has(target, prop)：拦截 in 操作符。可让属性“隐形”（返回 false），但实际存在
• deleteProperty(target, prop)：拦截 delete obj.prop。可用于禁止删除或记录删除行为
• ownKeys(target)：拦截 Object.getOwnPropertyNames() 和 for...in。可控制哪些属性被枚举

注意：receiver 通常指代当前 Proxy 实例，在涉及原型链或 this 绑定时很重要，多数简单场景可忽略。

Proxy 与 Object.defineProperty 的关键区别

两者都能做响应式，但 Proxy 更强大灵活：

• 支持数组索引、新增/删除属性、length 变更：defineProperty 只能监听已存在的属性，且对数组下标无效；Proxy 能直接捕获 arr[0] = 1 或 arr.push()
• 一次性拦截整类操作：比如用 ownKeys 控制所有枚举行为，无需逐个定义
• 不可撤销（除非手动封装）：Proxy 创建后无法关闭，但可通过包装成函数+闭包变量模拟“开关”
• 性能略低，兼容性稍差：Proxy 是 ES6+ 特性，不支持 IE；大量使用可能影响性能，生产环境建议按需启用

一个实用小例子：只读视图代理

快速创建一个禁止修改的代理对象：

function readOnly(obj) {
  return new Proxy(obj, {
    set() {
      throw new Error('Cannot modify read-only object');
    },
    deleteProperty() {
      throw new Error('Cannot delete property from read-only object');
    },
    defineProperty() {
      throw new Error('Cannot define property on read-only object');
    }
  });
}

const data = { x: 1 };
const ro = readOnly(data);
ro.x = 2; // 报错

这种模式在状态管理、配置对象保护、API 响应封装中很常见。

理论要掌握，实操不能落！以上关于《JavaScript Proxy 是什么？如何拦截对象操作》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！