Proxy 是 JavaScript 中用于拦截并自定义对象基本操作的代理构造函数，需传入目标对象和配置处理器，支持 get、set、has、ownKeys、apply 等陷阱方法，广泛应用于响应式系统、数据验证与 API 封装，但仅代理对象第一层且有性能与限制约束。
Proxy 是 JavaScript 中用于创建代理对象的构造函数，它允许你拦截并自定义对目标对象的基本操作（比如读取属性、赋值、枚举、函数调用等）。简单说，Proxy 就像一个“中间人”，所有对目标对象的操作都先经过它，你可以在这个过程中添加逻辑、验证、日志、响应式处理等。
Proxy 的基本结构
创建一个 Proxy 需要两个参数：
- target：被代理的原始对象
- handler：一个配置对象，定义各种拦截行为（称为“陷阱”或 traps）
示例：
const target = { name: 'Alice', age: 30 };const handler = {
get(target, prop) {
console.log(`访问属性: ${prop}`);
return target[prop];
}
};
const proxy = new Proxy(target, handler);
console.log(proxy.name); // 输出：访问属性: name → "Alice"
常用拦截方法（traps）
以下是最常使用的几个 trap，覆盖大部分日常需求：
立即学习“Java免费学习笔记（深入）”；
- get(target, prop, receiver)：拦截属性读取。可用于实现默认值、属性访问日志、响应式依赖收集
- set(target, prop, value, receiver)：拦截属性赋值。适合数据校验、只读限制、自动触发更新
- has(target, prop)：拦截 in 操作符，可隐藏属性或模拟稀疏数组
- ownKeys(target)：拦截 Object.keys()、for...in 等枚举操作，控制哪些属性可见
- apply(target, thisArg, args)：拦截函数调用，适用于装饰器、性能监控、参数预处理
实用场景举例
Proxy 不只是玩具，它支撑着 Vue 3 响应式系统、各类数据验证库和 API 客户端封装：
- 防止非法赋值：在 set 中检查类型或范围，抛出错误或静默忽略
- 自动格式化字段：比如给 date 属性赋值字符串时自动转为 Date 实例
- 构建可观测对象：每次 get/set 都触发回调，配合 WeakMap 实现细粒度依赖追踪
- API 请求代理：把对 proxy 的属性访问转换成 fetch 调用（如 proxy.users → GET /api/users）
注意事项与限制
使用 Proxy 时需注意几点：
- Proxy 只代理第一层，深层嵌套对象需要递归代理（或结合 Reflect 使用）
- 不能代理普通变量或原始值（如 number、string），只能代理对象（包括函数、数组、class 实例）
- 某些操作无法完全拦截，例如直接访问原型上的属性（除非也代理原型）、Object.is()、== 比较等
- 性能敏感场景慎用，每个操作多一层函数调用开销；生产环境建议按需启用
