Proxy和Reflect是运行时干预对象行为的底层机制，用于解决属性拦截、方法重写、可观测性等真实问题，而非语法糖；Proxy可拦截新增/删除属性等操作，优于Object.defineProperty，Reflect则提供统一、安全的默认操作接口。
JavaScript 代理（Proxy）和反射（Reflect）不是语法糖，而是运行时干预对象行为的底层机制；用它们做元编程，核心不是“炫技”，而是解决真实问题——比如属性访问拦截、方法调用重写、对象可观测性、库框架的透明包装等。
Proxy 是什么？为什么不能只靠 Object.defineProperty？
Proxy 是一个构造函数，用来创建一个代理对象，从而拦截并自定义对目标对象的基本操作（如读取、赋值、枚举、函数调用等）。它比 Object.defineProperty 强大得多，因为后者只能劫持已存在的属性，且无法监听新增/删除属性、in 操作、for...in 遍历、Object.keys() 等行为。
常见误用点：
- 把 Proxy 当成“响应式封装工具”直接套用，却没处理嵌套对象——
get拦截里不递归代理子对象，深层属性变更就失效 - 在
set拦截中忘记返回true（严格模式下必须返回真值，否则赋值失败并抛TypeError） - 代理数组时忽略
length变更、索引越界写入等特殊行为，导致逻辑错乱
Reflect 是什么？为什么 Proxy handler 里推荐用它？
Reflect 是一个内置对象，提供了一组静态方法，与 Proxy handler 中的 trap 名称一一对应（如 Reflect.get() 对应 get trap），用于以函数形式触发默认的底层操作。它不是“反射 API”的通用实现，而是 Proxy 的配套工具。
立即学习“Java免费学习笔记（深入）”；
关键好处：
- 统一操作接口：所有对象操作都收归到
Reflect下，避免obj[prop]、obj.prop、delete obj[prop]等散落写法 - 天然适配 Proxy：handler 中调用
Reflect.get(target, prop, receiver)就等价于默认行为，且能正确处理this绑定（receiver参数就是代理对象本身） - 失败静默：比如
Reflect.deleteProperty(obj, 'missing')返回false而非抛错，便于条件判断
错误示例：get(target, prop) { return target[prop]; } —— 这会丢失原型链查找逻辑和 getter 调用上下文；正确写法是 return Reflect.get(target, prop, receiver);
一个实用的可观测对象例子（带 setter 通知）
下面是一个最小可行的“可监听对象”实现，仅用 Proxy + Reflect，不依赖任何框架：
function observable(target, onChange) {
return new Proxy(target, {
set(obj, prop, value, receiver) {
const result = Reflect.set(obj, prop, value, receiver);
onChange(prop, value, obj);
return result;
},
deleteProperty(obj, prop) {
const result = Reflect.deleteProperty(obj, prop);
if (result) onChange(prop, undefined, obj, 'delete');
return result;
}
});
}
const state = observable({ count: 0 }, (key, val) => {
console.log(`state.${key} →`, val);
});
state.count = 1; // 输出: state.count → 1
delete state.count; // 输出: state.count → undefined delete
注意点：
-
onChange回调里拿到的obj是原始目标，不是代理对象；若需访问代理行为（如检查是否被冻结），得额外传参或闭包捕获 - 没处理
defineProperty、ownKeys等 trap，所以Object.defineProperty(state, 'x', {...})不会触发通知——按需补全 - 该实现不递归代理嵌套对象，
state.nested = { a: 1 }后，state.nested.a = 2不会触发onChange
哪些场景真该用 Proxy/Reflect？哪些不该？
该用：
- 实现轻量级响应式系统（Vue 3 的 reactive 底层就是 Proxy）
- 构建 mock/stub 工具，拦截方法调用并记录参数、控制返回
- 为调试注入日志，比如所有属性访问都打点（
get+console.trace()） - 权限控制：拦截敏感属性读写，根据用户角色放行或拒绝
不该用：
- 只是想给对象加几个方法——直接用 class 或普通函数更清晰
- 需要兼容 IE —— Proxy 和 Reflect 在 IE 中完全不可用，无 polyfill
- 高频数值计算场景（如游戏循环中每帧代理上万个对象）——Proxy 有明显性能开销，V8 优化有限
真正难的从来不是写一个 Proxy handler，而是想清楚：你拦截的到底是哪一层语义？是数据访问、控制流、还是所有权转移？一旦混淆，后续维护成本远高于初期那几行代码。
