Proxy用于拦截对象操作，Reflect提供默认行为方法，二者结合可实现数据监听与响应式系统，如创建只读代理、属性变更通知及简易响应式视图更新机制。
在JavaScript中，Proxy和Reflect是ES6引入的两个强大元编程工具，它们让开发者可以拦截并自定义对象的基本操作行为。结合使用这两个API，不仅能实现数据监听、访问控制，还能构建更灵活的对象交互机制。
什么是Proxy？
Proxy用于创建一个对象的代理，从而可以拦截对该对象的各种操作，比如读取属性、设置属性、调用方法等。它接受两个参数：目标对象和一个处理器（handler）对象。
常见拦截操作包括：
- get：拦截属性读取
- set：拦截属性赋值
- has：拦截 in 操作符
- deleteProperty：拦截 delete 操作
- apply：拦截函数调用（针对函数对象）
- construct：拦截 new 操作符
示例：实现一个只读对象代理
const createReadOnly = (target) => { return new Proxy(target, { set(target, prop, value) { console.error(`Cannot assign to read-only property '${prop}'`); return false; }, deleteProperty(target, prop) { console.error(`Cannot delete property '${prop}'`); return false; } }); }; const obj = { name: "Alice" }; const proxyObj = createReadOnly(obj); proxyObj.name = "Bob"; // 输出错误信息，赋值失败 delete proxyObj.name; // 输出错误信息，删除失败Reflect的作用与优势
Reflect是一个内置对象，提供了一系列静态方法，用于执行默认的行为。它的方法名与Proxy handler中的方法一一对应。使用Reflect可以让代码更清晰，并确保正确的this绑定。
例如，在Proxy中使用Reflect.get代替target[prop]，能保证原型链上的属性也能正确读取。
改进上面的例子，加入Reflect：
const createObservable = (target, onChange) => { return new Proxy(target, { set(target, prop, value) { const oldValue = Reflect.get(target, prop); const result = Reflect.set(target, prop, value); if (oldValue !== value) { onChange(prop, oldValue, value); } return result; }, get(target, prop) { return Reflect.get(target, prop); } }); }; const state = { count: 0 }; const observed = createObservable(state, (prop, oldVal, newVal) => { console.log(`${prop} changed from ${oldVal} to ${newVal}`); }); observed.count = 1; // 输出：count changed from 0 to 1 observed.count = 2; // 输出：count changed from 1 to 2实战：实现简单的响应式系统
利用Proxy和Reflect，我们可以模仿Vue 3的响应式原理，实现一个极简的响应式系统。
const observers = new WeakMap(); const observe = (target, callback) => { if (!observers.has(target)) { observers.set(target, new Set()); } observers.get(target).add(callback); }; const notify = (target) => { if (observers.has(target)) { observers.get(target).forEach(cb => cb()); } }; const reactive = (target) => { return new Proxy(target, { set(target, prop, value) { const result = Reflect.set(target, prop, value); notify(target); return result; } }); }; // 使用示例 const data = reactive({ count: 0 }); observe(data, () => { console.log("更新视图：", `Count is ${data.count}`); }); data.count = 1; // 视图自动更新 data.count = 2; // 再次更新注意事项与性能考量
虽然Proxy功能强大，但使用时也需注意以下几点：
- Proxy只能代理对象，不能代理基本类型值
- 某些操作如Object.keys()、for...in也会被拦截，需根据需要在handler中处理
- 过度使用可能带来性能开销，尤其深层嵌套对象应考虑递归代理或惰性代理策略
- Reflect方法通常比原生操作更安全，建议优先使用
基本上就这些。掌握Proxy与Reflect的配合使用，能让你在开发框架、状态管理、调试工具等方面拥有更强的控制力。不复杂但容易忽略的是保持对默认行为的尊重——而Reflect正是为此存在。
