JavaScript Proxy 是用于拦截和自定义对象基本操作的内置构造函数，通过目标对象和处理器对象（含 get、set 等陷阱）实现行为监控，支持数据响应式、属性日志等，但不递归代理嵌套对象，需配合 Reflect 保持默认语义。
JavaScript Proxy 是一个用于拦截和自定义对象基本操作的内置构造函数。 它允许你在访问、赋值、删除、枚举等行为发生时插入逻辑，相当于给对象装上“监控层”，不修改原对象结构就能改变其行为。
Proxy 的基本用法：创建代理对象
Proxy 接收两个参数：目标对象（target）和处理器对象（handler）。handler 里定义各种“陷阱”（traps），比如 get、set、has、deleteProperty 等，对应不同操作的拦截点。
最简示例：
const obj = { name: 'Alice', age: 30 };
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 有特定约束或需配合其他机制使用：
立即学习“Java免费学习笔记（深入）”；
-
get / set：最常用，可用于数据响应式（如 Vue 3）、属性访问日志、默认值兜底（
return prop in target ? target[prop] : 'default'） -
has：拦截
in操作符，可让属性“隐藏”在 in 检查中（返回 false），但不影响直接读取 -
ownKeys：控制
Object.keys()、for...in等返回的键列表，常与getOwnPropertyDescriptor配合实现属性枚举控制 -
deleteProperty：拦截
delete obj.prop，返回 false 可阻止删除（类似Object.defineProperty的 configurable: false） - apply / construct：仅对函数/类有效，分别拦截函数调用和 new 调用
Proxy 不能代理什么？常见误区
Proxy 只能代理**对象本身**，不递归代理嵌套对象：
- 如果目标对象某个属性是另一个普通对象，对该子对象的操作不会自动被外层 Proxy 拦截——需要手动递归包装，或结合 Reflect 使用
- 数组索引访问（如
arr[0]）走的是gettrap，但push、length变更等可能触发多次set和get，需注意性能 - 无法拦截原型链查找（
obj.toString()不触发 get，除非 toString 在 obj 自身上） - Proxy 实例本身不是目标对象，
proxy === obj为 false；想检测是否被代理，可用Proxy.revocable或自定义标识
实用小技巧：用 Reflect 配合保持默认行为
在 trap 中不要直接操作 target，推荐用 Reflect.get(target, prop, receiver) 等方法——它和对应操作语义一致，且能正确处理 this 绑定（尤其在 getter/setter 或继承场景下）：
const proxy = new Proxy({ x: 1 }, {
get(target, prop, receiver) {
console.log('get triggered');
return Reflect.get(target, prop, receiver); // 安全转发
}
});
这样既加了逻辑，又不破坏原有行为，也不用担心丢失 this 或 Symbol 方法。
基本上就这些。Proxy 不复杂但容易忽略细节，用好它，能让对象行为更可控、更透明。
