Proxy与Reflect配合可实现对象操作的拦截与默认行为调用，用于构建响应式系统、私有属性模拟和函数装饰器等场景，提升代码灵活性与可维护性。
JavaScript 的元编程能力让开发者可以在运行时动态控制对象的行为。其中 Proxy 和 Reflect 是实现这一能力的核心工具。它们不仅可用于拦截操作，还能构建更灵活、安全和可调试的代码结构。
理解 Proxy：拦截对象操作
Proxy 允许你为对象创建一个代理，从而定义对目标对象各种操作的自定义行为，比如读取属性、赋值、调用方法等。
基本语法：
const proxy = new Proxy(target, handler);其中 target 是被代理的对象，handler 是一个定义了拦截逻辑的对象。
立即学习“Java免费学习笔记（深入）”；
常见拦截操作包括：
- get：拦截属性读取
- set：拦截属性赋值
- has：拦截 in 操作符
- apply：拦截函数调用（用于函数对象）
- construct：拦截 new 操作符
- deleteProperty：拦截 delete 操作
示例：实现属性访问日志
const user = { name: 'Alice', age: 25 }; const loggedUser = new Proxy(user, { get(target, prop) { console.log(`读取属性: ${prop}`); return target[prop]; }, set(target, prop, value) { console.log(`设置属性: ${prop} = ${value}`); target[prop] = value; return true; } }); loggedUser.name; // 输出：读取属性: name loggedUser.age = 30; // 输出：设置属性: age = 30Reflect：统一的操作接口
Reflect 提供了一组静态方法，用于执行默认的对象操作。它与 Proxy 配合使用，能确保在拦截中调用原始行为。
例如，在 Proxy 的 handler 中使用 Reflect.get 而不是直接访问 target[prop]，可以保持 this 正确绑定，并处理边界情况。
改进上面的例子：
使用 receiver 参数能正确处理 getter/setter 中的 this 指向，尤其在继承场景下很重要。
高级应用场景技巧
利用 Proxy 和 Reflect 可以实现一些强大且实用的功能模式。
1. 数据绑定与响应式系统
通过监听 set 操作，触发视图更新，是 Vue 3 响应式系统的基础。
function reactive(obj, callback) { return new Proxy(obj, { set(target, prop, value) { const result = Reflect.set(target, prop, value); callback(prop, value); // 视图更新通知 return result; } }); } const state = reactive({ count: 0 }, (key, val) => { console.log(`${key} 更新为 ${val}`); }); state.count = 1; // 输出：count 更新为 12. 私有属性模拟
使用 Proxy 拦截私有属性访问，增强封装性。
const createInstance = (initial) => { const privates = new WeakMap(); const obj = { ...initial }; privates.set(obj, { _secret: 'private data' }); return new Proxy(obj, { get(target, prop) { if (prop.startsWith('_')) { throw new Error('禁止访问私有属性'); } return Reflect.get(target, prop); } }); };3. 函数代理：装饰器模式
拦截函数调用，实现日志、缓存或权限检查。
function trackCalls(fn) { return new Proxy(fn, { apply(target, thisArg, args) { console.log(`调用函数 ${target.name}，参数:`, args); return Reflect.apply(target, thisArg, args); } }); } const add = (a, b) => a + b; const trackedAdd = trackCalls(add); trackedAdd(2, 3); // 输出调用日志，返回 5注意事项与最佳实践
虽然 Proxy 功能强大，但使用时需注意性能和兼容性。
- Proxy 会带来一定的性能开销，避免对高频操作对象过度代理
- 某些操作如 for...in 拦截需要配合 ownKeys 和 has 使用
- Proxy 无法代理数组的所有变更（如索引赋值），需特别处理 length 或使用 Vue 的重写数组方法思路
- 尽量使用 Reflect 对应方法保持行为一致性
- 注意 this 绑定问题，receiver 参数不可忽略
