JavaScript代理与反射机制应用

Proxy与Reflect是JavaScript中用于拦截和自定义对象操作的元编程工具，二者结合可实现属性拦截、数据校验、响应式系统等功能，广泛应用于现代前端开发。

1. 基本定义Proxy用于创建目标对象的代理，通过拦截基本操作（如属性读写、函数调用等）实现自定义行为。其构造函数接受两个参数：

   目标对象（target）：需要被代理的对象。

   处理器对象（handler）：定义拦截行为的捕获器（traps），如get、set、has等。

2. 常见捕获器（Traps）

   get(target, property, receiver)：拦截属性读取操作。

   set(target, property, value, receiver)：拦截属性赋值操作，可返回布尔值表示是否成功。

   has(target, property)：拦截in操作符。

   deleteProperty(target, property)：拦截delete操作。

   apply(target, thisArg, argumentsList)：拦截函数调用。

3. 示例：属性访问日志记录

   const target = { name: 'Alice', age: 25 };const proxy = new Proxy(target, { get(target, property) { console.log(`读取属性: ${property}`); return Reflect.get(target, property); // 调用原始行为 }, set(target, property, value) { console.log(`设置属性: ${property} = ${value}`); return Reflect.set(target, property, value); }});proxy.name; // 输出：读取属性: nameproxy.age = 30; // 输出：设置属性: age = 30

1. 统一默认行为APIReflect是一个内置对象，提供与Proxy捕获器对应的方法（如Reflect.get()、Reflect.set()），确保在拦截后仍能调用原始操作。其设计目标包括：

   方法命名一致性：所有方法与Proxy捕获器同名（如Reflect.defineProperty()对应handler.defineProperty()）。

   函数式调用支持：便于逻辑封装和组合。

   安全性提升：部分操作（如Reflect.defineProperty()）在失败时返回false而非抛出错误。

2. 示例：属性赋值校验

   const validator = { set(target, property, value) { if (property === 'age') { if (typeof value !== 'number' || value < 0) { throw new Error('年龄必须是正数'); } } return Reflect.set(target, property, value); // 调用原始赋值行为 }};const user = new Proxy({}, validator);user.age = 25; // 成功user.age = -5; // 抛出错误：年龄必须是正数

1. 响应式系统（如Vue 3）Proxy可拦截属性访问，触发视图更新。例如：

   function reactive(obj, callback) { return new Proxy(obj, { set(target, property, value) { const result = Reflect.set(target, property, value); callback(property, value); // 通知更新 return result; } });}const state = reactive({ count: 0 }, (key, val) => { console.log(`${key} 变更为 ${val}`);});state.count = 1; // 输出：count 变更为 1

2. 权限控制通过has捕获器限制属性访问：

   const secureObj = new Proxy({ secret: '123' }, { has(target, property) { if (property === 'secret' && !isAdmin()) { return false; // 非管理员隐藏属性 } return Reflect.has(target, property); }});

3. 调试与日志记录拦截操作并记录变更历史，辅助排查问题。

1. 性能影响Proxy的拦截操作会引入额外开销，避免对深层嵌套对象过度代理。

2. Reflect的必要性在捕获器中必须通过Reflect调用原始行为，否则可能导致递归调用（如直接返回target[property]会触发代理的get捕获器）。

3. 兼容性Proxy和Reflect为ES6特性，需确保目标环境支持（如IE11及以下不兼容）。

Proxy与Reflect通过拦截-反射机制，为JavaScript提供了强大的元编程能力，适用于数据校验、响应式系统、权限控制等场景。合理使用可提升代码扩展性，但需注意性能与兼容性问题。