Proxy用于拦截对象操作，Reflect提供默认行为方法，二者结合可实现日志、校验、响应式等场景，提升元编程能力。
JavaScript中的Proxy和Reflect是ES6引入的两个重要特性，它们为对象操作提供了更强大的元编程能力。Proxy可以拦截并自定义对象的基本操作，而Reflect则提供了一套统一的方法来执行这些操作，并与Proxy配合使用效果更佳。
Proxy：创建可监听的对象代理
Proxy用于创建一个对象的代理，从而可以拦截并重新定义对该对象的各种操作，比如属性读取、赋值、枚举、函数调用等。它的基本语法如下：
const proxy = new Proxy(target, handler);其中，target 是要被代理的原始对象，handler 是一个配置对象，定义了哪些操作需要被捕获以及如何响应。
常见的捕获器（traps）包括：
立即学习“Java免费学习笔记（深入）”；
- get(target, property)：拦截对象属性的读取
- set(target, property, value)：拦截属性设置
- has(target, property)：拦截 in 操作符
- deleteProperty(target, property)：拦截 delete 操作
- apply(target, thisArg, args)：拦截函数调用（仅当目标是函数时）
- construct(target, args)：拦截 new 操作符
示例：实现一个带日志功能的属性访问代理
const obj = { name: 'Alice', age: 25 };const proxiedObj = new Proxy(obj, {
get(target, property) {
console.log(`读取属性: ${property}`);
return target[property];
},
set(target, property, value) {
console.log(`设置属性: ${property} = ${value}`);
target[property] = value;
return true;
}
});
proxiedObj.name; // 输出：读取属性: name
proxiedObj.age = 30; // 输出：设置属性: age = 30
Reflect：统一的对象操作API
Reflect不是构造函数，而是一个内置对象，它提供了一系列静态方法，对应于Proxy中可以捕获的操作。例如，Reflect.get() 对应 get 捕获器，Reflect.set() 对应 set 捕获器。
使用Reflect的好处在于：
- 让对象操作更加规范化和函数式
- 避免直接调用Object上的方法可能出现的this问题
- 与Proxy结合时能更方便地转发默认行为
常见Reflect方法：
- Reflect.get(target, property, receiver)
- Reflect.set(target, property, value, receiver)
- Reflect.has(target, property)
- Reflect.deleteProperty(target, property)
- Reflect.apply(func, thisArg, args)
- Reflect.construct(Constructor, args)
改进上面的例子，使用Reflect保持默认行为：
const proxiedObj = new Proxy(obj, {get(target, property, receiver) {
console.log(`读取属性: ${property}`);
return Reflect.get(target, property, receiver);
},
set(target, property, value, receiver) {
console.log(`设置属性: ${property} = ${value}`);
return Reflect.set(target, property, value, receiver);
}
});
这样既能添加逻辑，又能确保原有行为不被破坏。
Proxy + Reflect 的典型应用场景
这两个API组合使用非常灵活，适用于多种实际场景：
- 数据绑定与响应式系统：如Vue 3利用Proxy实现响应式，通过拦截get收集依赖，set触发更新
- 参数校验与类型检查：在set时验证数据格式或范围
- 不可变对象封装：阻止对对象的修改操作并抛出错误
- 调试与监控工具：记录所有对象访问行为，便于排查问题
- 私有属性模拟：通过has和get控制某些属性对外不可见
例如，防止非法属性赋值：
const validatedObj = new Proxy({}, {set(target, property, value) {
if (property === 'age' && typeof value !== 'number') {
throw new TypeError('age必须是数字');
}
return Reflect.set(target, property, value);
}
}); 基本上就这些。Proxy和Reflect共同构成了JavaScript中强大的元编程基础，合理使用能让代码更具表现力和可控性。
