JavaScript Proxy是什么_如何实现数据劫持？_技术教程

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。

若未定义 ownKeys，Proxy 会返回目标对象的自有属性键，但不会通知响应式系统有新属性被读取
若想让新增属性在遍历时“可见”，必须在 ownKeys 中返回完整键列表，并确保该列表与实际状态一致
has trap 同理：不实现它，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，要注意兼容性兜底