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，遍历时根本看不到代理逻辑。
构建 Shopify 嵌入式应用（Embedded App）的开发技能：基于 @shopify/shopify-app-react-router + React Router v7 + Admin API 2026-04。覆盖 shopifyApp 配置、authenticate.admin 的 GraphQL/REST 调用、Webhook 校验、Session 存储、订阅计费、App Bridge 导航、部署，并新增：适用场景判断、安全最佳实践、错误处理与容错、最佳实践、常见问题 FAQ、高级场景。G
立即学习“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 就会断掉。
