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 不复杂但容易忽略细节,用好它,能让对象行为更可控、更透明。