Proxy用于拦截对象操作，Reflect提供默认行为方法，二者结合可实现属性代理、数据绑定、验证等高级功能，提升代码控制力与可维护性。
JavaScript的元编程能力让开发者可以干预对象的基本操作行为，其中 Proxy 和 Reflect 是实现这一功能的核心工具。它们从ES6开始引入，为语言带来了前所未有的灵活性和控制力。
什么是Proxy？
Proxy用于创建一个对象的代理，从而可以拦截并自定义该对象的各种基本操作，比如属性读取、赋值、枚举、函数调用等。它就像一道“拦截层”，在目标对象之前处理所有访问请求。
使用语法如下：
const proxy = new Proxy(target, handler);target 是要被代理的原始对象，handler 是一个配置对象，定义了哪些操作需要被捕获以及如何响应。
立即学习“Java免费学习笔记（深入）”；
常见捕获器（traps）包括：
- get：拦截属性读取
- set：拦截属性赋值
- has：拦截 in 操作符
- deleteProperty：拦截 delete 操作
- apply：拦截函数调用（仅适用于函数对象）
- construct：拦截 new 操作符
示例：实现属性访问的日志记录
const target = { name: 'Alice' }; const loggedObj = new Proxy(target, { get(obj, prop) { console.log(`读取属性: ${prop}`); return obj[prop]; }, set(obj, prop, value) { console.log(`设置属性: ${prop} = ${value}`); obj[prop] = value; return true; // 必须返回true表示赋值成功 } });loggedObj.name; // 输出：读取属性: name loggedObj.age = 25; // 输出：设置属性: age = 25
Reflect的作用与设计初衷
Reflect 不是一个构造函数，而是一组内置方法的集合，这些方法与Proxy中的trap一一对应。它的出现是为了统一对象操作的底层API，并提供更可靠的默认行为。
例如，使用 Reflect.get(target, key) 可以替代 target[key]，但前者可以在第三个参数传入 thisArg 来控制上下文，更适合在Proxy中调用。
在Proxy中推荐使用Reflect的原因：
- 保持默认行为一致
- 代码更清晰，语义明确
- 避免直接调用原始操作时出错（如this绑定问题）
改进上面的例子：
const loggedObj = new Proxy(target, { get(obj, prop, receiver) { console.log(`读取属性: ${prop}`); return Reflect.get(obj, prop, receiver); }, set(obj, prop, value, receiver) { console.log(`设置属性: ${prop} = ${value}`); return Reflect.set(obj, prop, value, receiver); } });
这里传入的 receiver 是proxy本身，在处理getter/setter或继承场景时非常重要，能确保正确的this指向。
实用应用场景
利用Proxy和Reflect可以实现多种高级模式：
数据绑定与响应式系统
Vue 3之前的版本（Vue 2）就使用Object.defineProperty结合Proxy思路进行依赖追踪。通过Proxy可监听整个对象变化，自动触发视图更新。
验证与类型检查
function createValidatedObject(target, validator) { return new Proxy(target, { set(obj, prop, value) { if (validator[prop] && !validator[prop](value)) { throw new Error(`无效的值：${prop} 不能设为 ${value}`); } return Reflect.set(obj, prop, value); } }); }const user = createValidatedObject({}, { age: val => typeof val === 'number' && val > 0 });
user.age = -1; // 抛错
私有属性模拟
虽然JS现在支持#私有字段，但可用Proxy限制对某些属性的外部访问。
const privatePrefix = '_'; const obj = { _secret: '秘密', public: '公开' };const secureObj = new Proxy(obj, {
get(target, prop) {
if (prop.startsWith(privatePrefix)) {
throw new Error(禁止访问私有属性 ${prop});
}
return Reflect.get(target, prop);
}
});
注意事项与陷阱
尽管功能强大，但使用Proxy需注意以下几点：
- 性能开销：每个操作都经过拦截，频繁操作可能影响性能
- 不可变性限制：Proxy本身不能完全防止内部绕过（如直接操作target）
- 部分操作无法拦截：例如对象原型的直接修改（除非也代理__proto__）
- JSON.stringify可能绕过get：如果属性不可枚举或被隐藏，需自定义toJSON
基本上就这些。掌握Proxy与Reflect的关键在于理解它们如何协作：Proxy负责拦截，Reflect负责执行默认行为。合理使用能让代码更具表达力和可维护性。不复杂但容易忽略细节。
