JavaScript中的代理（Proxy）和反射（Reflect）有哪些高级用法？

JavaScript中的Proxy和Reflect高级用法包括实现响应式系统、创建只读代理、方法调用拦截与AOP编程、属性访问控制及自动对象初始化。这些用法通过拦截对象操作并自定义行为，显著提升了代码的灵活性和可维护性，尤其适用于框架开发和复杂状态管理。以下是具体应用场景及实现方式：

Proxy可监听动态属性增删、数组变化及in/delete操作，结合Reflect确保原始行为执行并触发依赖更新。

• 核心逻辑：通过get陷阱收集依赖，set陷阱触发更新。
• 示例：function reactive(obj) { return new Proxy(obj, { get(target, key, receiver) { const result = Reflect.get(target, key, receiver); console.log(`访问属性: ${String(key)}`); return typeof result === 'object' && result !== null ? reactive(result) : result; }, set(target, key, value, receiver) { const oldVal = target[key]; const result = Reflect.set(target, key, value, receiver); console.log(`更新属性 ${String(key)}: ${oldVal} -> ${value}`); return result; } });}const state = reactive({ count: 0 });state.count++; // 触发访问和更新日志
• 优势：相比Object.defineProperty，Proxy支持动态属性监听和数组索引变化。

通过拦截set和deleteProperty操作，防止对象状态被意外修改。

• 核心逻辑：在set或deleteProperty中抛出错误，get中递归处理嵌套对象。
• 示例：function readOnly(obj) { return new Proxy(obj, { set(target, key) { throw new Error(`Cannot assign to read-only property '${String(key)}'`); }, deleteProperty(target, key) { throw new Error(`Cannot delete read-only property '${String(key)}'`); }, get(target, key, receiver) { const result = Reflect.get(target, key, receiver); return typeof result === 'object' && result !== null ? readOnly(result) : result; } });}const config = readOnly({ nested: { value: 42 } });config.nested.value = 100; // 抛出错误
• 应用场景：配置对象、状态管理中的不可变数据。

利用apply陷阱拦截函数调用，实现日志、性能监控等横切逻辑。

• 核心逻辑：在apply中包装原始函数调用，添加额外行为。
• 示例：function withTiming(fn) { return new Proxy(fn, { apply(target, thisArg, args) { console.time(`${target.name || 'Function'} execution`); const result = Reflect.apply(target, thisArg, args); console.timeEnd(`${target.name || 'Function'} execution`); return result; } });}const heavyTask = withTiming(function() { let sum = 0; for (let i = 0; i < 1e7; i++) sum += i;});heavyTask(); // 输出执行时间
• 优势：无需修改原始函数，通过代理统一添加横切关注点。

通过拦截has、ownKeys和get操作，限制属性访问权限。

• 核心逻辑：在has中检查属性是否在允许列表中，get中抛出未授权错误。
• 示例：function createSecureObject(obj, allowedKeys = []) { return new Proxy(obj, { has(target, key) { return allowedKeys.includes(key) ? Reflect.has(target, key) : false; }, ownKeys(target) { return allowedKeys.filter(key => Reflect.has(target, key)); }, get(target, key, receiver) { if (!allowedKeys.includes(key)) { throw new Error(`Access denied to property '${String(key)}'`); } return Reflect.get(target, key, receiver); } });}const user = createSecureObject( { name: 'Alice', ssn: '123-45-6789', role: 'admin' }, ['name', 'role']);console.log(user.name); // 正常输出// console.log(user.ssn); // 抛出错误
• 应用场景：敏感数据保护、权限管理。

通过get陷阱惰性创建嵌套对象或返回默认值，避免undefined错误。

• 核心逻辑：在get中检查属性是否存在，不存在时自动创建。
• 示例：function autoInit() { return new Proxy({}, { get(target, key) { if (!(key in target)) { target[key] = autoInit(); // 惰性创建子对象 } return target[key]; } });}const nested = autoInit();nested.a.b.c.d = 42;console.log(nested.a.b.c.d); // 42，路径自动创建
• 优势：简化嵌套对象操作，避免手动初始化。

• Proxy与Reflect配合：Proxy拦截操作，Reflect确保默认行为执行（如Reflect.get、Reflect.set）。
• 适用场景：框架开发（如Vue 3）、状态管理、调试工具、安全控制。
• 设计原则：理解每个陷阱的用途（如get、set、apply），避免过度拦截导致性能问题。

通过合理使用Proxy和Reflect，可以构建出更智能、可控的JavaScript对象行为，提升代码质量和开发效率。