Proxy 可拦截对象操作，Reflect 提供默认行为方法，两者结合实现数据监听、验证与响应式系统，如 Vue 3 的 reactive，提升开发灵活性与控制力。
JavaScript 的 Proxy 和 Reflect 是 ES6 引入的重要特性，它们让开发者能够更深入地控制对象的行为。Proxy 可以拦截并自定义对象的基本操作，而 Reflect 提供了一套统一的方法来执行这些操作，并与 Proxy 配合使用效果更佳。
Proxy：创建对象的代理
Proxy 用于创建一个对象的代理，从而可以拦截并重新定义对该对象的各种操作，比如读取属性、设置属性、调用方法等。
语法如下：
const proxy = new Proxy(target, handler);target 是要被代理的对象，handler 是一个配置对象，定义了如何拦截和处理各种操作。
立即学习“Java免费学习笔记（深入）”；
常见的拦截操作包括：
- get：拦截对象属性的读取
- set：拦截对象属性的设置
- has：拦截 in 操作符
- deleteProperty：拦截 delete 操作
- apply：拦截函数调用（当目标是函数时）
- construct：拦截 new 操作符
示例：使用 get 和 set 实现数据绑定和验证
const user = { name: 'Alice', age: 25 }; const handler = { get(target, property) { console.log(`访问属性: ${property}`); return target[property]; }, set(target, property, value) { if (property === 'age' && typeof value !== 'number') { throw new TypeError('年龄必须是数字'); } console.log(`设置属性 ${property} 为 ${value}`); target[property] = value; return true; // 必须返回 true 表示设置成功 } }; const proxyUser = new Proxy(user, handler); proxyUser.name; // 输出：访问属性: name proxyUser.age = 30; // 输出：设置属性 age 为 30Reflect：统一的操作API
Reflect 不是一个构造函数，而是一组内置的方法，用于执行 JavaScript 对象的默认行为。它的方法名与 Proxy handler 中的方法一一对应。
例如，Reflect.get 获取属性值，Reflect.set 设置属性值，等等。
使用 Reflect 的好处：
- 提供更一致的对象操作方式
- 可以在 Proxy 中调用原始行为
- 部分操作比传统方法更可靠（如 Reflect.apply 替代 Function.prototype.apply）
示例：在 Proxy 中结合 Reflect 使用
const data = { firstName: 'John', lastName: 'Doe' }; const handler = { get(target, property) { console.log(`尝试读取 ${property}`); return Reflect.get(target, property); }, set(target, property, value) { console.log(`尝试设置 ${property}`); if (property === 'email' && !value.includes('@')) { console.error('邮箱格式不正确'); return false; } return Reflect.set(target, property, value); } }; const proxyData = new Proxy(data, handler); proxyData.email = 'invalid-email'; // 输出错误信息Proxy 与 Reflect 的协作模式
在实际开发中，Proxy 常用于监听或增强对象行为，而 Reflect 用来保留原始逻辑。这种组合特别适合实现：
- 响应式系统（如 Vue 3 的 reactive）
- 日志记录和调试工具
- 权限控制和数据校验
- 不可变对象封装
Vue 3 就是通过 Proxy + Reflect 实现了高效的依赖追踪和更新机制，替代了 Vue 2 中基于 Object.defineProperty 的方案。
注意事项与限制
尽管 Proxy 功能强大，但也有一些需要注意的地方：
- 不能代理所有类型的值（如原始类型 string、number 等）
- 某些操作无法被完全拦截（如直接访问原型上的属性）
- 性能开销：频繁的拦截操作可能影响性能
- 数组索引变化、length 属性等也能被监听，但需注意触发机制
例如，给数组添加元素会触发 set 拦截：
const arr = []; const proxyArr = new Proxy(arr, { set(target, property, value) { console.log(`设置索引 ${property}: ${value}`); target[property] = value; return true; } }); proxyArr.push('a'); // 输出：设置索引 0: a基本上就这些。掌握 Proxy 和 Reflect，你就拥有了操控 JavaScript 对象底层行为的能力，这对构建高级框架和工具非常有帮助。
