Proxy 是用于拦截并自定义对象基本操作的构造器，通过 handler（含 get、set、has、ownKeys 等 trap）与 target 构建代理层，实现响应式、校验、日志等高级功能。
Proxy 是 JavaScript 中用于拦截并自定义对象基本操作的构造器。它不修改原对象，而是创建一个“代理层”，让开发者能精确控制读取、赋值、枚举、函数调用等行为——适合实现响应式系统、数据验证、日志追踪、权限控制等高级场景。
Proxy 的核心结构：handler + target
创建 Proxy 需要两个参数：target（目标对象） 和 handler（捕获器对象）。handler 里定义各种 trap（陷阱），比如 get、set、has、ownKeys 等，每个方法对应一种对象操作。
- target 可以是普通对象、数组、甚至 null（但多数 trap 会报错）
- handler 必须是对象，可以为空对象
{}，此时 Proxy 行为与原对象一致 - Proxy 实例本身不可枚举（
for...in不会列出 handler 方法），它只是透明代理
常用 trap 示例：从响应式到校验
下面几个 trap 覆盖最常见控制需求：
- get(target, prop, receiver)：拦截属性读取。可用于默认值、链式调用兜底、依赖收集（如 Vue 响应式）
-
set(target, prop, value, receiver)：拦截赋值。适合数据校验、类型转换、触发更新（如
obj.count = "2"自动转成数字） -
has(target, prop)：拦截
prop in obj。可隐藏内部属性（如以_开头的字段不被 in 检测到） -
ownKeys(target)：拦截
Object.keys()、for...in等。可过滤/排序返回的键名，实现“逻辑只读视图”
示例：一个带运行时类型检查的配置对象
立即学习“Java免费学习笔记（深入）”；
const config = new Proxy(
{ timeout: 5000, retries: 3 },
{
set(obj, key, value) {
if (key === 'timeout' && typeof value !== 'number') {
throw new TypeError('timeout must be a number');
}
if (key === 'retries' && (!Number.isInteger(value) || value < 0)) {
throw new TypeError('retries must be a non-negative integer');
}
obj[key] = value;
return true;
}
}
);
config.timeout = 3000; // ✅
config.timeout = '3s'; // ❌ 报错
注意边界与限制
Proxy 强大但不是万能的，使用时需留意：
- 无法代理非对象（如原始值、symbol 作为 key 时需显式处理）
- 某些操作无法完全拦截，例如
Object.prototype.toString.call(proxy)仍返回原对象类型字符串 - Proxy 实例与原对象不相等（
proxy === original为 false），且不能通过instanceof继承原构造器（需配合constructtrap 实现） - 性能敏感场景慎用——每个属性访问都多一层函数调用，大量高频读写可能有开销
进阶技巧：嵌套代理与 revocable
真实项目中常需递归代理嵌套对象或动态开关代理能力：
- 递归代理：在
get中对返回值是对象的自动包装为新 Proxy，实现深层响应式 -
Proxy.revocable(target, handler)返回{ proxy, revoke }，调用revoke()后所有 trap 失效，适合临时沙箱或权限降级 - 结合
ReflectAPI 使用：推荐在 trap 中用Reflect.get()、Reflect.set()等转发操作，语义清晰且兼容性好
基本上就这些。Proxy 不复杂但容易忽略细节，关键是明确你要控制哪类操作，再选对 trap 并合理转发——它不是语法糖，而是一把精准的控制刀。
