Proxy是JavaScript内置构造函数,用于创建可拦截读写、调用等操作的代理对象;通过handler定义get/set等trap实现响应式、校验、日志等功能,但无法拦截私有字段、Object.assign等静态方法及原型链隐式访问。

JavaScript 代理对象(Proxy)是什么
Proxy 是 JavaScript 提供的一个内置构造函数,用来创建一个“代理”,拦截并自定义对目标对象的基本操作。它不是装饰器、也不是继承机制,而是一层运行时的拦截网——所有对代理对象的读写、调用、遍历等行为,都可被显式捕获和重定义。
Proxy 如何拦截 get/set 等基本操作
通过传入 handler 对象,你可以定义如 get、set、has、deleteProperty 等 trap(陷阱)。每个 trap 接收代理本身、操作的 key、值(如 set)、原始目标等参数,返回值会影响原操作结果。
常见使用场景包括:实现响应式数据(如 Vue 3)、属性访问校验、日志记录、不可变封装、虚拟属性注入。
-
get(target, prop, receiver):拦截读取,比如obj.x或obj['x'];注意要手动调用Reflect.get()否则不触发原型链查找 -
set(target, prop, value, receiver):拦截赋值;必须返回true才算设置成功,否则抛出 TypeError(严格模式下) -
has(target, prop):影响prop in proxy和with语句 -
ownKeys(target):控制Object.keys()、for...in返回的键列表,需返回数组且包含所有自身可枚举键
const target = { a: 1 };
const proxy = new Proxy(target, {
get(obj, prop) {
console.log('get', prop);
return prop in obj ? obj[prop] : 'default';
},
set(obj, prop, value) {
console.log('set', prop, value);
obj[prop] = value * 2; // 修改写入逻辑
return true;
}
});
proxy.a; // → 'get a', 1
proxy.b = 5; // → 'set b 5', target.b 变为 10
哪些操作无法被 Proxy 拦截
Proxy 只能拦截「语言内部方法(internal methods)」的显式调用,不能覆盖引擎底层优化或绕过规范的行为。以下操作不会触发对应 trap:
立即学习“Java免费学习笔记(深入)”;
- 直接访问原型上的属性(除非
get中显式处理receiver和原型链) -
Object.getOwnPropertyDescriptor(proxy, 'x')→ 触发getOwnPropertyDescriptor,但若没定义该 trap,则退回到目标对象行为 - 某些 Object 静态方法如
Object.assign()、JSON.stringify()不走 Proxy trap,而是读取属性值后操作 - 私有字段
#x的访问完全无法拦截(语法层面禁止代理) - 代理对象自身属性(如
proxy.constructor)不经过 handler,除非你用getOwnPropertyDescriptor+defineProperty显式控制
Proxy 与 Object.defineProperty 的关键区别
两者都能做属性拦截,但 Proxy 是对象级、动态、一次性生效;Object.defineProperty 是属性级、静态、需逐个定义,且无法监听新增属性或数组索引赋值(如 arr[1] = x)。
- Proxy 支持数组索引、Symbol 键、动态添加属性的拦截;
defineProperty对数组索引无效(除非把数组当普通对象用) - Proxy 无法被 for...in / Object.keys 完全隐藏(除非配合
ownKeys+enumerable: false在目标上设属性) - Proxy 创建后不可撤销(ES2022 新增
Proxy.revocable()可解决) - 性能上,Proxy 开销略高,尤其高频操作场景需谨慎;
defineProperty则在初始化阶段有明显成本
const { proxy, revoke } = Proxy.revocable({ x: 1 }, {});
proxy.x; // → 1
revoke();
proxy.x; // → TypeError: Cannot perform 'get' on a proxy that has been revoked
代理对象真正的复杂点不在 API,而在 trap 之间的协同:比如 set 中修改了某个值,但 get 没同步更新缓存,或 ownKeys 返回的键没被 getOwnPropertyDescriptor 覆盖,就可能让 Object.keys() 和 in 表现出不一致。这些边界必须手工对齐。











