Proxy 是 ES6 提供的原生 API，用于创建对象代理以拦截并自定义基本操作，它不修改原对象，可监听数组索引赋值、新增属性、in/delete 等操作，而 Object.defineProperty 无法覆盖这些盲区。
Proxy 是什么？它不是 Object.defineProperty 的替代品
Proxy 是 ES6 提供的原生 API，用于创建一个对象的代理，从而拦截并自定义对该对象的基本操作（如读取、赋值、枚举、函数调用等）。它不修改原对象，而是提供一层拦截逻辑。和 Object.defineProperty 不同，Proxy 可以监听数组索引赋值、数组长度变更、新增属性、in 操作、delete 操作等——这些是 Object.defineProperty 无法覆盖的盲区。
关键点：Proxy 拦截的是「操作行为」，不是「属性定义时机」；它作用于整个对象，而非单个属性。
怎么用 Proxy 实现基础响应式数据劫持？
核心是使用 get 和 set 两个 trap 捕获读写行为，并在其中触发依赖收集与更新通知。但要注意：Proxy 默认只代理第一层，深层对象需递归代理或惰性代理。
-
set中必须返回true才表示赋值成功，否则会抛出TypeError（严格模式下） - 原始值（如字符串、数字）不能被 Proxy 直接代理，需包装成对象
- 避免在
get中直接返回代理后的子对象，否则每次访问都新建 Proxy，造成内存泄漏和性能问题 - 应缓存已代理过的子对象，用
WeakMap存储最稳妥
const handlers = {
get(target, key, receiver) {
track(target, key); // 依赖收集
const res = Reflect.get(target, key, receiver);
if (typeof res === 'object' && res !== null && !isReactive(res)) {
return reactive(res); // 惰性代理
}
return res;
},
set(target, key, value, receiver) {
const result = Reflect.set(target, key, value, receiver);
trigger(target, key); // 触发更新
return result;
}
};
function reactive(obj) {
if (!obj || typeof obj !== 'object') return obj;
if (isReactive(obj)) return obj;
return new Proxy(obj, handlers);
}
为什么 Proxy 无法监听 for...in / Object.keys() 等枚举操作？
因为默认情况下，ownKeys trap 不会被触发，除非你显式重写它。而 for...in、Object.keys()、Object.getOwnPropertyNames() 都会触发 ownKeys；in 操作符则触发 has trap。
立即学习“Java免费学习笔记（深入）”；
- 若未定义
ownKeys，Proxy 会返回目标对象的自有属性键，但不会通知响应式系统有新属性被读取 - 若想让新增属性在遍历时“可见”，必须在
ownKeys中返回完整键列表，并确保该列表与实际状态一致 -
hastrap 同理：不实现它，key in proxy就走默认逻辑，可能绕过响应式追踪
const handlers = {
ownKeys(target) {
track(target, 'keys'); // 收集对“键列表”的依赖
return Reflect.ownKeys(target);
},
has(target, key) {
track(target, key);
return Reflect.has(target, key);
}
};
Proxy 在真实框架中怎么避开常见坑？
Vue 3 的 reactive 就基于 Proxy，但它做了大量边界处理。你手写时最容易忽略的是：
- 不代理
Symbol属性：ownKeys默认不包含 Symbol 键，需手动合并Reflect.ownKeys(target).concat(Reflect.getPrototypeOf(target) ? [] : [])并过滤 - 不处理原型链访问：比如
proxy.toString()会走到get，但你可能只想代理自有属性，此时要用receiver === proxy判断调用来源 - 不能代理内置对象如
Map/Set的方法调用（如map.set()），需要单独封装或用get拦截方法后 bind this - SSR 场景下，
Proxy在 Node.js 12+ 可用，但某些老环境仍 fallback 到defineProperty，要注意兼容性兜底
真正难的不是写一个能跑的 Proxy，而是让它在嵌套、循环引用、Symbol、内置类型、跨 iframe、序列化等场景下不崩、不漏、不重复代理。
