17370845950

Proxy 是 JavaScript 用于拦截并自定义对象基本操作的原生 API，通过 handler 拦截 get/set 等行为，配合 Reflect 提供标准化底层操作，实现响应式数据劫持；但仅代理第一层，需手动递归处理嵌套对象。

JavaScript 代理（Proxy）是什么？

Proxy 是 JavaScript 提供的原生 API，用于**拦截并自定义对象的基本操作行为**，比如读取属性（get）、赋值（set）、枚举（ownKeys）、函数调用（apply）等。它不是语法糖，也不是装饰器，而是一个可编程的“中间层”——所有对目标对象的操作，都必须经过 Proxy 实例才能抵达目标。

关键点：Proxy 本身不存储数据，它只是转发操作；真正的数据仍在原始对象（target）里。你不能靠 proxy.prop = value 直接改 target 的内部状态，除非在 set 拦截器里显式写入。

Reflect 是什么？为什么和 Proxy 配合使用？

Reflect 是一个内置对象，提供了一组静态方法，对应 JavaScript 中的底层操作（如 Reflect.get()、Reflect.set()）。它的设计初衷就是**为 Proxy 拦截器提供标准化、安全的默认行为实现**。

常见误区：直接用 target[key] = value 在 set 中赋值，会绕过原型链上的 setter，也可能触发意外的 getter；而 Reflect.set(target, key, value, receiver) 能正确处理原型、setter、严格模式报错等边界情况。

• Reflect.get(target, key, receiver) 比 target[key] 更可靠，尤其当 target 有 getter 或继承自其他对象时
• Reflect.has(target, key) 是 key in target 的函数化形式，可在 Proxy 中统一拦截 in 操作
• 所有 Reflect 方法返回布尔值或结果值，失败时不抛异常（如 Reflect.deleteProperty() 返回 false），便于 Proxy 内部做条件判断

如何用 Proxy + Reflect 实现基础数据劫持？

所谓“数据劫持”，核心是捕获属性访问与修改，并在其中插入响应式逻辑（例如通知更新、收集依赖）。下面是最简可用的响应式代理骨架：

const handler = {
  get(target, key, receiver) {
    console.log(`读取 ${key}`);
    return Reflect.get(target, key, receiver);
  },
  set(target, key, value, receiver) {
    console.log(`设置 ${key} = ${value}`);
    // 可在此处触发更新通知（如 notify(key)）
    return Reflect.set(target, key, value, receiver);
  }
};

const data = { count: 0 };
const reactiveData = new Proxy(data, handler);

reactiveData.count++; // 输出：读取 count → 设置 count = 1

注意：receiver 参数很重要——它通常是 Proxy 实例本身，在涉及原型或 this 绑定时影响行为。漏传可能导致 getter 中的 this 指向错误。

• 只代理第一层属性：Proxy 默认不递归代理嵌套对象，data.nested.obj 中的 nested 还是普通对象，需手动递归 wrap
• 数组索引赋值（arr[0] = x）和 length 修改会被 set 拦截，但 push、pop 等方法不会触发 set，需重写数组方法或监听 set + get + ownKeys 组合
• Proxy 无法代理 undefined、null、原始类型（string/number/boolean），只能代理 object、array、function、class 实例等

哪些地方容易出错？

实际写响应式系统时，这几个坑几乎必踩：

• 在 get 中直接返回 target[key] 而非 Reflect.get(...)，导致丢失对 getter/setter 的支持，且无法正确处理 receiver
• 忘记对返回值做响应式转换：如果 get 返回一个对象，应递归调用 reactive() 包裹，否则深层属性无法劫持
• 在 set 中未判断值是否真正变化（Object.is(oldVal, newVal)），导致无意义的重复通知
• 用 for...in 或 Object.keys() 遍历 Proxy 对象时，得不到预期结果——需配合 ownKeys 和 getOwnPropertyDescriptor 拦截器才能控制枚举行为
• Proxy 实例无法被 === 原对象比较，也不能用 instanceof 判断原始构造器（需用 Proxy.revocable() 或保存原始引用）

Proxy 的能力很强，但它的“透明性”是假象——一旦你开始拦截，就必须自己负责所有语义一致性。很多看似简单的操作（比如展开运算符 {...proxy}）背后涉及多个 trap 调用，稍不留神就漏掉一环。