Proxy 是 JavaScript 中用于创建代理对象的构造函数，通过 target 和 handler 拦截并自定义对象操作；支持 get、set、has 等 trap 实现响应式、验证等功能；需配合 Reflect 安全转发，注意仅代理第一层、不可代理原始值等限制。
Proxy 是 JavaScript 中用于创建代理对象的构造函数，能拦截并自定义对目标对象的基本操作，比如读取、赋值、删除、调用等。 它不是修改原对象行为的“补丁”，而是包裹一层可编程的中间层，让开发者在不侵入原始逻辑的前提下，实现响应式系统、数据验证、日志记录、访问控制等功能。
Proxy 的基本结构：t
arget + handler
创建 Proxy 需要两个参数：
-
target：被代理的原始对象（可以是普通对象、数组、函数，甚至 null）；
-
handler：一个配置对象，里面定义各种“陷阱”（trap），即要拦截的操作及其处理逻辑。
示例：拦截属性读取和设置
const obj = { count: 0 };
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.count++; // 输出：读取 count → 设置 count = 1
常用拦截操作（trap）及典型用途
以下是最常使用的几个 trap，每个都对应一种对象操作：
-
get(target, prop, receiver)：拦截读取属性，可用于响应式依赖收集、默认值兜底（如
obj?.x || 'default' 的轻量替代）；
-
set(target, prop, value, receiver)：拦截赋值，适合做类型校验、只读限制、变更通知（如 Vue 2 的 defineProperty 替代方案）；
-
has(target, prop)：拦截
in 操作符，可隐藏属性或模拟稀疏数组；
-
deleteProperty(target, prop)：拦截
delete obj.prop，实现不可删除属性；
-
apply(target, thisArg, args)：仅对函数生效，拦截函数调用，可用于日志、节流、参数预处理；
-
construct(target, args, newTarget)：拦截
new 调用，可控制实例化过程或返回不同对象。
注意边界与常见陷阱
Proxy 强大但有使用限制，忽略这些容易出错：
- Proxy 只代理第一层——深层嵌套对象不会自动被拦截，需递归代理或结合 Reflect 使用；
- 不能代理非对象（如原始值 string/number），但可代理包装对象（
new String('a')）；
- 某些操作必须返回特定值才能成功，例如
set 必须返回 true，has 必须返回布尔值；
- 避免在 handler 中直接读写 target 的同名属性，否则可能触发无限递归（应通过
Reflect.get() / Reflect.set() 安全转发）；
- Proxy 对象不等于原对象：
proxy === obj 为 false，且 Object.is(proxy, obj) 也不成立。
配合 Reflect 实现安全转发
Reflect 提供了一组与 trap 同名的静态方法，语义清晰、行为标准，推荐在 handler 中搭配使用：
const proxy = new Proxy({ x: 1 }, {
get(target, prop, receiver) {
console.log(`访问 ${prop}`);
return Reflect.get(target, prop, receiver); // 安全转发
},
set(target, prop, value, receiver) {
console.log(`设置 ${prop}`);
return Reflect.set(target, prop, value, receiver); // 返回 boolean
}
});
这样既保留原始行为，又便于扩展逻辑，也避免了 this 绑定或原型链查找的手动处理。
arget + handler