Proxy可拦截对象操作，Reflect提供默认行为，二者结合实现数据监听、验证与响应式等高级功能，如Vue 3的响应式系统，但需注意性能和兼容性限制。
JavaScript中的Proxy和Reflect是ES6引入的重要元编程特性，它们让开发者能够拦截并自定义对象的基本操作行为。在实际开发中，合理使用这两个API可以实现数据监听、属性验证、日志记录、性能监控等高级功能。
理解Proxy：创建可拦截的对象
Proxy允许你为一个对象包装一层“代理”，从而控制对该对象的访问。它接收两个参数：目标对象和处理器（handler）对象。handler定义了如get、set、has、deleteProperty等陷阱函数，用于拦截特定操作。
常见用途包括：
- 数据绑定与响应式系统：Vue 3就基于Proxy实现了响应式机制
- 属性访问控制：限制某些属性不可读或不可写
- 输入验证：在设置值时进行类型检查或格式校验
- 日志与调试：记录对象属性的读写过程
const user = {
name: 'Alice',
age: 25
};
const validatedUser = new Proxy(user, {
set(target, property, value) {
if (property === 'age') {
if (typeof value !== 'number' || value < 0) {
throw new Error('Age must be a positive number');
}
}
if (property === 'name') {
if (typeof value !== 'string' || value.length === 0) {
throw new Error('Name must be a non-empty string');
}
}
target[property] = value;
console.log(`Updated ${property} to ${value}`);
return true;
},
get(target, property) {
console.log(`Accessed ${property}`);
return target[property];
}
});
validatedUser.age = 30; // 日志输出，并成功更新
validatedUser.name = ''; // 抛出错误
Reflect：统一的操作接口
Reflect不是构造函数，而是一个提供默认行为方法的工具对象。它的方法与Proxy handler的方法一一对应。使用Reflect可以让代码更清晰、更安全地调用默认行为。
立即学习“Java免费学习笔记（深入）”；
优势在于：
- 替代原有的命令式操作（如 delete obj.prop）为函数式调用（Reflect.deleteProperty）
- 保证this正确指向目标对象
- 与Proxy配合使用时逻辑更一致
const validatedUser = new Proxy(user, {
set(target, property, value, receiver) {
let success = false;
if (property === 'age' && (typeof value !== 'number' || value < 0)) {
throw new Error('Age must be a positive number');
}
if (property === 'name' && (typeof value !== 'string' || value.length === 0)) {
throw new Error('Name must be a non-empty string');
}
success = Reflect.set(target, property, value, receiver);
if (success) {
console.log(`Updated ${property} to ${value}`);
}
return success;
},
get(target, property, receiver) {
console.log(`Accessed ${property}`);
return Reflect.get(target, property, receiver);
}
});
实战场景：构建可观测的数据模型
结合Proxy和Reflect，我们可以实现一个简单的观察者模式，用于状态管理或UI更新触发。
实现一个可监听变化的状态容器
function createObservable(data, onChange) {
return new Proxy(data, {
set(target, property, value, receiver) {
const oldValue = target[property];
const result = Reflect.set(target, property, value, receiver);
if (oldValue !== value) {
onChange(property, oldValue, value);
}
return result;
}
});
}
// 使用示例
const state = createObservable(
{ count: 0 },
(prop, oldVal, newVal) => {
console.log(`${prop} changed from ${oldVal} to ${newVal}`);
}
);
state.count = 1; // 输出：count changed from 0 to 1
state.count = 2; // 输出：count changed from 1 to 2
这个模式可用于轻量级状态管理，避免依赖大型框架就能实现响应式更新。
注意事项与性能考量
虽然Proxy强大，但也有局限性：
- 无法代理数组的索引赋值性能敏感场景需谨慎使用
- 某些特殊对象如DOM节点不能直接代理
- 遍历操作（如for...in）也会被ownKeys等陷阱影响，注意完整性
- 浏览器兼容性方面，IE不支持，需考虑polyfill或降级方案
建议只在必要时对关键对象使用Proxy，避免过度代理导致内存和性能开销。
基本上就这些。掌握Proxy与Reflect的核心用法后，你可以构建出更加灵活和智能的对象交互逻辑，是现代JavaScript工程化中不可或缺的技术手段。
