proxy是javaScript中用于创建代理对象的构造函数，可拦截并自定义对目标对象的操作。通过handler中的陷阱（如get、set、has等），能实现属性读取监控、数据验证、属性存在性控制等功能。例如使用set陷阱可在赋值时校验数据类型，确保age字段为数值且在合理范围内，从而实现响应式更新或数据保护机制。

javascript 中的 Proxy 对象为开发者提供了强大的元编程能力，允许你拦截并自定义对象的基本操作。通过 Proxy，你可以控制对象的读取、写入、枚举、函数调用等行为，非常适合用于数据验证、日志记录、性能监控或构建响应式系统。

什么是 Proxy？

Proxy 是 JavaScript 提供的一个构造函数，可以创建一个代理对象，用来包装另一个对象（目标对象）。通过这个代理，你可以拦截对该对象的各种操作，比如属性访问、赋值、方法调用等。

使用方式如下：

const target = {};
const handler = {
  get(obj, prop) {
    console.log(`访问属性 ${prop}`);
    return obj[prop];
  }
};

const proxy = new Proxy(target, handler);
proxy.name = “Alice”;
console.log(proxy.name); // 访问属性 name → Alice

在这个例子中，我们通过 get 拦截器监控了属性的读取操作。target 是被代理的对象，handler 定义了拦截逻辑，proxy 是最终使用的代理实例。

立即学习“Java免费学习笔记（深入）”；

常用拦截操作（Traps）

Proxy 支持多种“陷阱”（traps），对应不同的对象操作。以下是几个常用的：

豆包AI编程

豆包推出的AI编程助手

483

查看详情

• get(target, Property)：拦截属性读取。常用于默认值处理或属性映射。
• set(target, property, value)：拦截属性赋值。适合做数据校验或触发更新。
• has(target, property)：拦截 in 操作符。可控制属性是否被认为存在。
• deleteProperty(target, property)：拦截 delete 操作。可用于保护关键属性不被删除。
• apply(target, thisArg, args)：仅用于函数对象，拦截函数调用。
• construct(target, args)：拦截 new 操作符，控制构造行为。

示例：使用 set 实现数据验证

const user = { age: 25 };

validatedUser.age = -5; // 抛出错误

实际应用场景

Proxy 不只是理论工具，在实际开发中有广泛用途：

• 响应式系统：vue 3 使用 Proxy 实现响应式数据监听。当数据变化时自动触发视图更新。
• 调试与日志：通过拦截 get 和 set，记录属性访问轨迹，帮助排查问题。
• 私有属性模拟：约定以下划线开头的属性不可外部访问，通过 Proxy 控制读写权限。
• API 代理封装：统一处理接口请求参数或响应格式，增强健壮性。

例如，实现一个简单的只读视图：

function createReadOnly(target) {
  return new Proxy(target, {
    set() {
      throw new Error(“该对象为只读”);
    }
  });
}

const config = createReadOnly({ api: “https://api.example.com” });
config.api = “hacker”; // 错误：该对象为只读

基本上就这些。Proxy 提供了对对象底层行为的精细控制，让 JavaScript 的元编程变得可行且实用。掌握它，能让你写出更灵活、更安全的代码。