Proxy是拦截并自定义对象基本操作的包装器,不修改原对象,通过handler中的get、set、has、deleteProperty、ownKeys、apply、construct等trap实现响应式、校验、日志等功能,但仅浅代理且部分内置行为不可拦截。

JavaScript 代理对象(Proxy)是一个包装器,用来拦截并自定义对另一个对象的基本操作行为。 它不改变原对象本身,而是提供一层“中间层”,让开发者能监听、改写甚至阻止对目标对象的访问或修改。核心用途是实现响应式系统、数据校验、日志记录、权限控制等高级逻辑。
Proxy 能拦截哪些操作?
Proxy 通过 handler 对象定义一系列捕获器(traps),每个对应一种对象操作。常见且高频使用的包括:
-
get(target, prop, receiver):读取属性时触发,比如
obj.x或obj['x']。可用于实现默认值、链式调用、响应式依赖收集。 -
set(target, prop, value, receiver):设置属性时触发,如
obj.x = 123。适合做数据校验、变更通知、不可变约束。 -
has(target, prop):用于
in操作符,比如'x' in obj。可隐藏某些属性,模拟稀疏数组或权限过滤。 -
deleteProperty(target, prop):对应
delete obj.x。能阻止删除、记录删除行为或触发清理逻辑。 -
ownKeys(target):影响
Object.keys()、for...in、Reflect.ownKeys()等枚举行为。可控制哪些属性被列出,常用于代理 Symbol 属性或私有字段。 -
apply(target, thisArg, argumentsList):仅对函数对象有效,在函数被调用时触发,比如
fn()。可用于装饰器、参数预处理、调用日志。 -
construct(target, argumentsList, newTarget):拦截
new操作,适用于封装构造函数、强制继承、实例监控等场景。
不是所有操作都能被 Proxy 拦截
Proxy 是“浅代理”——它只拦截直接作用于代理对象的操作,不递归代理嵌套对象。例如:
- 对
proxy.a.b = 1,get拦截会先触发获取a,但如果a是普通对象而非另一个 Proxy,后续对b的赋值就不会再走set。 - 原型链上的属性访问(如未在自身定义的属性)仍走正常原型查找,除非显式在
get中处理receiver和原型委托。 - 部分内置行为无法拦截,比如
Object.prototype.toString.call(proxy)仍返回[object Object],不会触发get;但可通过toStringTagSymbol 微调。
一个最小可用示例
下面代码创建一个带日志的代理,每次读写都打印信息:
立即学习“Java免费学习笔记(深入)”;
const target = { x: 1 };
const proxy = 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 表示成功
}
});
proxy.x; // 输出:读取 x
proxy.y = 42; // 输出:设置 y = 42
基本上就这些。Proxy 不复杂但容易忽略细节,比如必须显式返回值、注意 receiver 参数、避免无限递归(在 handler 里操作 target 要小心)。掌握常用 traps 就能覆盖大多数元编程需求。











