Proxy 与 Reflect 是 JavaScript 元编程的天然搭档，Proxy 拦截行为，Reflect 提供标准化底层操作；必须配合使用以确保属性描述符、访问器、继承链和 receiver 正确性。
Proxy 和 Reflect 是 JavaScript 中实现元编程的两个核心机制：前者用于**拦截并重定义对象行为**，后者提供**标准化、可编程的对象底层操作接口**。它们不是替代品，而是天然搭档——几乎每个 Proxy 捕获器（trap）都应配合对应名称的 Reflect 方法来转发默认行为，否则极易破坏原型链、getter/setter 绑定或导致不可预期的静默失败。
为什么 set/get 拦截里必须用 Reflect.set/Reflect.get？
直接操作 target[property] = value 或 target[property] 看似简单，但会绕过属性描述符（如 writable: false、configurable: false）、忽略访问器（accessor）的 this 上下文，甚至在继承场景中丢失 receiver 引用，导致 getter/setter 内部的 this 指向错误目标对象。
-
receiver参数确保 getter/setter 中的this正确指向代理本身（而非原始target），这对 Vue 响应式、MobX 等依赖this的库至关重要 - 不使用
Reflect.set()时，返回值逻辑也不一致：原生赋值无返回值，而set捕获器必须显式返回true（成功）或false（失败，严格模式抛错） -
Reflect.get(target, prop, receiver)是唯一能正确触发Object.prototype.__proto__查找链和 Symbol 描述符的行为
const obj = {
get name() { return this._name || 'Anonymous'; },
set name(v) { this._name = v.toUpperCase(); }
};
const proxy = new Proxy(obj, {
get(target, prop, receiver) {
console.log(`GET ${prop}`);
// ✅ 正确：保留 this 指向 proxy，触发访问器
return Reflect.get(target, prop, receiver);
// ❌ 错误：this 指向 target，_name 读写失效
// return target[prop];
}
});
console.log(proxy.name); // "Anonymous"（正确）
return Reflect.get(target, prop, receiver);
// ❌ 错误：this 指向 target，_name 读写失效
// return target[prop];
}
});
console.log(proxy.name); // "Anonymous"（正确）如何用 Proxy + Reflect 实现带类型校验的只读代理？
常见误区是只拦截 set 就认为“只读”，但忘了 deleteProperty、defineProperty、ownKeys 等也能破坏只读性；同时类型校验若不结合 Reflect，会导致非字符串值被静默丢弃或报错位置模糊。
- 必须拦截全部可变操作：
set、deleteProperty、defineProperty、preventExtensions、setPrototypeOf - 类型校验应在
set中完成，但赋值动作仍需交由Reflect.set()执行，以保持属性描述符语义 - 对只读对象，
get拦截中调用Reflect.get()可确保访问器、Symbol 属性、继承属性正常工作
function createTypedReadOnly(obj, typeCheck = (v) => typeof v === 'string') {
return new Proxy(obj, {
set(target, prop, value, receiver) {
if (!typeCheck(value)) {
throw new TypeError(`Property '${String(prop)}' must be a string`);
}
// ✅ 转发给 Reflect，尊重 writable/configurable 等限制
return Reflect.set(target, prop, value, receiver);
},
deleteProperty() { throw new TypeError('Cannot delete property'); },
defineProperty() { throw new TypeError('Cannot define property'); },
preventExtensions() { return true; }, // 已经不可扩展
get(target, prop, receiver) {
return Reflect.get(target, prop, receiver);
}
});
}
哪些高级场景离不开 Proxy + Reflect 配合？
单独使用 Proxy 或 Reflect 都无法完成这些任务，必须二者协同：
-
响应式系统：Vue 3 的
reactive()在get中收集依赖，在set中触发更新；Reflect.get()确保嵌套对象访问也进入代理链（避免“响应式断裂”） -
透明缓存代理：在
get中检查缓存，未命中则用Reflect.get()计算并缓存，避免重复执行副作用函数 -
安全沙箱：拦截
apply和construct，用Reflect.apply()/Reflect.construct()控制this和参数，防止恶意代码逃逸 -
调试与可观测性：所有操作统一走
Reflect，便于统一打点、计时、审计，而不会漏掉in、for...in等隐式操作
Reflect 不只是“为了配合 Proxy”，它本身是 JavaScript 对象操作的**唯一正交接口**——Reflect.has() 比 prop in obj 更可靠（不触发原型上 getter），Reflect.ownKeys() 比 Object.keys() 多返回 Symbol 属性，且所有方法都明确返回布尔值或结果，没有副作用。写 Proxy 时不加 Reflect，就像开车不系安全带：一时省事，出问题时连 crash 日志都难定位。
