Proxy 能拦截 get、set、has、deleteProperty、apply、construct、ownKeys、getOwnPropertyDescriptor 等基本操作；通过 handler 中的 traps 实现对目标对象读取、赋值、函数调用等行为的自定义控制。
JavaScript 中的 Proxy 对象是实现代理模式的核心机制，它允许你创建一个代理对象来拦截并自定义对目标对象的基本操作（如读取、赋值、函数调用等）。相比传统的封装或继承方式，Proxy 提供了更底层、更灵活的控制能力，且无需修改原始对象结构。
Proxy 能拦截哪些基本操作？
Proxy 通过 handler 对象定义一系列可选的“陷阱”（traps），每个 trap 对应一种对象操作。常用且高频的拦截包括：
-
get(target, prop, receiver)：拦截读取属性（
obj.prop或obj['prop']），可用于实现默认值、响应式依赖收集、链式调用等。 -
set(target, prop, value, receiver)：拦截设置属性（
obj.prop = value），常用于数据校验、变更通知、不可变对象封装。 -
has(target, prop)：拦截
prop in obj操作，可让属性“看似存在但不可访问”，或实现隐藏字段。 -
deleteProperty(target, prop)：拦截
delete obj.prop，可用于禁止删除、记录日志或触发清理逻辑。 -
apply(target, thisArg, args)：拦截函数调用（
fn(...args)），适用于装饰器、参数预处理、调用统计。 -
construct(target, args, newTarget)：拦截
new Fn()，可用于控制实例化过程、返回缓存实例、强制使用 new 等。 -
ownKeys(target)：拦截
Object.getOwnPropertyNames()、Object.keys()、for...in等枚举操作，可隐藏或动态生成键名。 -
getOwnPropertyDescriptor(target, prop)：拦截
Object.getOwnPropertyDescriptor()，配合defineProperty可控制属性描述符可见性。
一个实用的响应式代理示例
下面是一个简化版的响应式数据代理，演示如何用 Proxy 实现「属性读取时收集依赖，设置时触发更新」：
const handlers = {
get(target, prop) {
track(target, prop); // 收集依赖（例如：当前正在执行的 effect）
return target[prop];
},
set(target, prop, value) {
target[prop] = value;
trigger(target, prop); // 触发更新（例如：重新运行所有依赖该属性的 effect）
return true;
}
};
const reactive = (obj) => new Proxy(obj, handlers);
这个模式正是 Vue 3 响应式系统的基础原理之一 —— 不需要 Object.defineProperty 的兼容性限制，也不依赖类或特殊方法，直接作用于普通对象。
立即学习“Java免费学习笔记（深入）”；
注意事项与边界情况
Proxy 的能力强大，但也有一些关键限制和易错点：
- Proxy 只代理**直接操作**，对目标对象内部的嵌套对象不会自动递归代理，需手动 deep proxy 或按需代理（如 get 中对返回值再 wrap）。
- 不能代理非对象类型（如 number、string、null、undefined），会报 TypeError。
- 某些操作无法被完全拦截或行为受限，例如：
target === proxy返回 false；proxy instanceof TargetConstructor为 false；Object.is(proxy, target)为 false。 - Proxy 实例本身不可被
JSON.stringify正确序列化（除非在toJSONtrap 中显式处理）。 - 性能开销略高于原生对象访问，高频场景（如大型数组遍历）需谨慎评估。
