Proxy是拦截并自定义对象基本操作的包装器,Reflect提供与之对应的标准化操作接口;二者配合可实现日志、校验、响应式等元编程功能。

JavaScript 代理对象(Proxy)是一个可以拦截并自定义基本操作(如读取、赋值、函数调用等)的包装器;Reflect API 是一组静态方法,提供与 Proxy 拦截器对应的标准操作接口,让底层操作更规范、更可预测。
Proxy 能做什么?
Proxy 允许你为一个目标对象创建“代理”,然后通过 handler 对象定义各种陷阱(trap),从而控制对该对象的访问行为。它不是修改原对象,而是提供一层可编程的拦截机制。
- 拦截属性读取(get):比如实现默认值、日志记录、响应式依赖收集
- 拦截属性设置(set):做数据校验、触发更新、阻止非法赋值
- 拦截 in 操作符(has)、删除(deleteProperty)、枚举(ownKeys)等
- 还能代理函数调用(apply)、构造(construct)、实例检测(isExtensible)等
Reflect API 解决什么问题?
过去很多对象操作是命令式的(比如 obj[prop] = val、delete obj[prop]、Object.defineProperty()),缺乏统一接口。Reflect 把这些操作封装成函数方法,并和 Proxy 的 trap 一一对应,带来三个关键好处:
-
操作可返回结果:比如
Reflect.set(obj, key, val)返回布尔值表示是否成功,而obj[key] = val总是返回赋的值,无法判断是否真的设置了 -
避免抛异常:像
Reflect.has(obj, key)安全替代key in obj(后者在 obj 为 null/undefined 时会报错) -
与 Proxy 配合自然:在 Proxy handler 中推荐用 Reflect 方法转发操作,例如
return Reflect.get(target, prop, receiver),保证语义一致且不丢失 this 绑定
一个典型配合用法
下面是一个带日志和校验的简单代理示例:
立即学习“Java免费学习笔记(深入)”;
const obj = { count: 0 };
const proxy = new Proxy(obj, {
get(target, prop) {
console.log(`读取 ${prop}`);
return Reflect.get(target, prop); // 推荐写法,保持默认行为
},
set(target, prop, value) {
if (prop === 'count' && typeof value !== 'number') {
throw new Error('count 必须是数字');
}
console.log(`设置 ${prop} = ${value}`);
return Reflect.set(target, prop, value); // 返回操作结果
}
});
这里 Reflect 不仅让代码清晰,还确保了 getter/setter 行为与原生一致(比如处理原型链、setter this 绑定等细节)。
基本上就这些。Proxy + Reflect 是现代 JS 元编程的核心组合,用得好能写出更健壮、可调试、可扩展的对象抽象逻辑,比如 Vue 响应式、Mock 工具、权限控制层都依赖它们。











