代理反射_JS元编程入门

Proxy 和 Reflect 是 JavaScript 元编程的核心，Proxy 可拦截对象操作，Reflect 提供默认行为方法，二者结合可实现响应式系统、数据校验、日志监控等高级功能。

JavaScript 的元编程能力让开发者可以在运行时动态地操作对象的行为。其中，Proxy（代理）和Reflect（反射）是 ES6 引入的两个核心特性，它们共同构成了 JS 元编程的基础。通过它们，我们可以拦截并自定义对象的基本操作，比如读取属性、赋值、枚举等。

什么是 Proxy？

Proxy 可以理解为对象的“包装器”。创建一个 Proxy 实例后，所有对该对象的操作都会经过一个“拦截层”，你可以在这一层中定义自定义行为。

语法如下：

const proxy = new Proxy(target, handler);

target 是要被代理的原始对象，handler 是一个配置对象，用来定义哪些操作需要被拦截以及如何响应。

常见拦截方法包括：

• get：拦截属性读取
• set：拦截属性赋值
• has：拦截 in 操作符
• deleteProperty：拦截 delete 操作
• ownKeys：拦截 Object.keys() 等键枚举操作

举个例子，我们想监控对某个对象的所有访问：

const user = { name: 'Alice', age: 25 }; const proxyUser = 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; // 必须返回 true 表示设置成功 } }); proxyUser.name; // 输出：读取属性: name proxyUser.age = 30; // 输出：设置属性: age = 30

Reflect 是做什么的？

Reflect 不是一个函数对象，而是一组内置方法的集合，这些方法与 Proxy 中的拦截操作一一对应。它的设计目的是让对象操作更加规范化，并且能更好地配合 Proxy 使用。

比如，以前我们用：

'name' in obj delete obj[prop] Object.keys(obj)

现在可以用 Reflect 对应的方法：

Reflect.has(obj, 'name') Reflect.deleteProperty(obj, prop) Reflect.ownKeys(obj)

使用 Reflect 的好处之一是，它的方法和 Proxy handler 方法保持一致，调用结果更可靠，也更容易在 Proxy 中转发默认行为。

改进上面的例子：

const proxyUser = new Proxy(user, { get(target, prop) { console.log(`读取属性: ${prop}`); return Reflect.get(target, prop); // 调用默认行为 }, set(target, prop, value) { console.log(`设置属性: ${prop} = ${value}`); return Reflect.set(target, prop, value); // 返回布尔值，更安全 } });

Proxy + Reflect 的典型应用场景

这两者结合，可以实现很多强大的功能：

• 数据绑定与观察者模式：Vue 3 就是基于 Proxy 实现响应式系统，比 Vue 2 的 defineProperty 更强大，能监听新增或删除属性。
• 参数校验：在 set 拦截中加入类型或格式检查。
• 日志记录与调试：像上面例子那样，追踪对象的每一次访问。
• 私有属性模拟：通过拦截 ownKeys 和 get，隐藏特定前缀的属性（如 _ 开头）。
• API 代理与权限控制：限制对某些方法的调用或属性的访问。

注意事项与局限性

虽然 Proxy 功能强大，但使用时也要注意：

• Proxy 只能代理对象，不能代理基本类型。
• 不是所有对象都能完全被代理，比如 Date 对象的一些内部槽位无法拦截。
• 性能开销：频繁的拦截操作可能影响性能，不适合对性能极度敏感的场景。
• Proxy 无法检测原型链上的变化，需手动处理。

基本上就这些。掌握 Proxy 和 Reflect，你就拥有了 JavaScript 元编程的钥匙。它们让你从“使用对象”升级到“控制对象行为”，是现代前端框架底层的重要支撑。不复杂但容易忽略细节，建议动手写几个小例子加深理解。