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、严格模式报错等边界情况。
立即学习“Java免费学习笔记（深入）”；
-
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 调用，稍不留神就漏掉一环。
