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 = 30Reflect 是做什么的？
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 元编程的钥匙。它们让你从“使用对象”升级到“控制对象行为”，是现代前端框架底层的重要支撑。不复杂但容易忽略细节，建议动手写几个小例子加深理解。
