17370845950

Proxy 是用于拦截并自定义对象操作的构造器，通过 target 和 handler 创建代理，支持 get、set、has 等陷阱方法，比 Object.defineProperty 更强大灵活，适用于响应式、只读封装等场景。

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 响应封装中很常见。