Proxy允许拦截对象操作，Reflect提供默认行为方法，二者结合可实现数据监听、日志记录等高级功能，如通过get/set捕获器构建响应式系统或监控方法调用。
JavaScript中的代理（Proxy）与反射（Reflect）API为开发者提供了拦截和自定义对象行为的能力，尤其在构建复杂框架、实现数据绑定或进行运行时监控时非常有用。它们不是日常开发中频繁使用的工具，但在高级场景下极具价值。
什么是代理（Proxy）？
Proxy允许你创建一个对象的代理，从而可以拦截并重新定义该对象的基本操作，比如属性读取、赋值、枚举、函数调用等。它接受两个参数：目标对象和一个处理器对象（trap handlers）。
常见捕获器包括：get、set、has、apply、construct等。
例如，实现一个只读视图：
立即学习“Java免费学习笔记（深入）”；
const target = { name: 'Alice' };const readOnly = new Proxy(target, { set() { throw new Error("Cannot modify a read-only object"); }, deleteProperty() { throw new Error("Cannot delete property"); }});
尝试修改readOnly.name会抛出错误，有效保护原始数据。
反射（Reflect）的作用
Reflect不是构造函数，而是一组内置方法，用于执行默认的对象操作。它的方法与Proxy捕获器一一对应，常在Proxy中调用以保留原始行为。
使用Reflect的好处是统一了操作接口，并且多数方法与Object上的方法类似，但更侧重于可编程操作。
例如，在get捕获器中使用Reflect.get：
const reactive = new Proxy(target, { get(target, key, receiver) { console.log(`GET ${String(key)}`); return Reflect.get(target, key, receiver); }, set(target, key, value, receiver) { console.log(`SET ${String(key)} = ${value}`); return Reflect.set(target, key, value, receiver); }});
receiver参数确保this正确指向代理本身，避免访问器属性丢失上下文。
实现简单的响应式系统
借助Proxy和Reflect，可以模拟Vue 3中的响应式机制核心逻辑。
基本思路是：当属性被访问时收集依赖，被修改时触发更新。
简化实现：
const subscribers = new Set();function track() { // 模拟依赖收集 const effect = activeEffect; if (effect) { subscribers.add(effect); }}function trigger() { // 触发所有副作用函数 subscribers.forEach(effect => effect());}const reactive = (obj) => { return new Proxy(obj, { get(target, key, receiver) { const result = Reflect.get(target, key, receiver); track(); return typeof result === 'object' ? reactive(result) : result; }, set(target, key, value, receiver) { const oldVal = target[key]; const result = Reflect.set(target, key, value, receiver); if (oldVal !== value) { trigger(); } return result; } });};
这样就能监听对象变化并自动执行副作用函数，适合构建轻量级状态管理。
使用Proxy实现方法调用拦截与日志记录
对于类实例，可用Proxy包装其实例来监控方法调用。
示例：记录所有方法调用及其参数
class UserService { getUser(id) { return { id, name: 'Bob' }; } saveUser(user) { // 模拟保存 }}const service = new UserService();const loggedService = new Proxy(service, { get(target, key, receiver) { const prop = Reflect.get(target, key, receiver); if (typeof prop === 'function') { return function(...args) { console.log(`Calling method: ${key} with`, args); const result = Reflect.apply(prop, target, args); console.log(`Method ${key} returned`, result); return result; }; } return prop; }});
这种方式无需修改原类代码即可添加横切关注点，如日志、性能监控或权限检查。
基本上就这些。Proxy和Reflect配合使用，能让你在不侵入原有逻辑的前提下，增强对象的行为控制能力。虽然强大，但也需谨慎使用，避免过度抽象导致调试困难。
以上就是JavaScript中的代理与反射API高级应用的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1532983.html
微信扫一扫 
支付宝扫一扫 
