Proxy 是 ES6 提供的原生代理机制,能拦截13种操作;Object.defineProperty 仅劫持已有属性的 get/set,无法代理新增属性、枚举、数组索引等。

Proxy 是什么,为什么不能直接用 Object.defineProperty 替代
Proxy 是 ES6 提供的原生代理机制,能真正拦截对象的读、写、枚举、函数调用等 13 种基本操作;而 Object.defineProperty 只能劫持已有属性的 get/set,对新增属性、in、delete、for...in、Object.keys 等完全无感,也无法代理数组索引赋值或 length 修改。
常见误判:以为给对象加个 set 就算“响应式”,结果 obj.newProp = 1 不触发、delete obj.x 不拦截、Reflect.has(target, 'x') 绕过监听——这些都必须靠 Proxy。
最简可用的 get/set 拦截写法
核心是传入两个参数:目标对象(target)和处理器对象(handler)。不手动转发操作会导致代理失效(比如忘了 return Reflect.get(...))。
-
get和set必须显式返回值,否则读取为undefined,赋值会静默失败 - 推荐统一用
ReflectAPI 转发,它和Object方法行为一致但更可靠(例如正确处理私有字段、原型链) - 不要在
set里直接改target[key] = value,这会绕过后续可能的其他代理或数据校验逻辑
const obj = { x: 1 };
const proxy = new Proxy(obj, {
get(target, key, receiver) {
console.log('get', key);
return Reflect.get(target, key, receiver);
},
set(target, key, value, receiver) {
console.log('set', key, value);
return Reflect.set(target, key, value, receiver);
}
});
proxy.x = 2; // 输出 set x 2,obj.x 变为 2
拦截 for...in、Object.keys、JSON.stringify 等枚举行为
这些操作底层调用的是 ownKeys + getOwnPropertyDescriptor,不是 get。若只写 get,遍历时根本看不到代理逻辑。
立即学习“Java免费学习笔记(深入)”;
-
ownKeys必须返回数组,内容是希望暴露的键名(字符串或 Symbol) - 若想隐藏某个属性,别把它放进
ownKeys返回值;若想让hasOwnProperty返回 false,还要配合getOwnPropertyDescriptor返回undefined -
JSON.stringify会调用getOwnPropertyDescriptor获取属性描述符,若该方法没返回有效 descriptor,属性会被忽略
const proxy = new Proxy({ a: 1, b: 2 }, {
ownKeys() {
return ['a']; // 只暴露 'a'
},
getOwnPropertyDescriptor(target, key) {
if (key === 'b') return undefined; // 让 b 对 hasOwnProperty / JSON.stringify 不可见
return Reflect.getOwnPropertyDescriptor(target, key);
}
});
console.log(Object.keys(proxy)); // ['a']
console.log(JSON.stringify(proxy)); // {"a":1}
注意 trap 的 this 和 receiver 区别
所有 handler 方法中,this 指向 handler 对象本身;而 receiver 是原始触发操作的对象(通常是 proxy 本身),在继承或 Reflect 调用中决定 this 绑定和原型链查找起点。
- 漏传
receiver到Reflect.get/Reflect.set会导致 getter/setter 中的this指向错误(变成 target 而非 proxy) - 如果目标对象有 getter,且你希望它内部的
this指向 proxy(而非 target),必须把receiver传下去 - 多数场景下直接透传
receiver最安全,除非你明确要切断代理链
这个细节在 Vue 3 响应式实现里被反复验证过:不传 receiver,嵌套对象的 reactive 就会断掉。











