Proxy的核心用途是提供钩子机制以精准控制特定行为,其能力取决于handler函数,适用于细粒度干预、调试辅助、不可变封装和API边界控制。

JavaScript 中 Proxy 的核心用途不是“拦截所有操作”,而是精准控制特定行为
直接说结论:Proxy 本身不提供功能,它只提供一个钩子(trap)机制,让你在对象被访问、赋值、枚举、构造等关键节点插入自定义逻辑。真正的能力来自你写的 handler 函数,而不是 Proxy 构造本身。
常见误用是试图用 Proxy 替代深克隆或状态管理库——它做不到,也不该做。它的合理定位是:细粒度行为干预、调试辅助、不可变封装、API 边界控制。
-
get和set是最常用陷阱,但注意:它们不触发对原始对象属性的读写,而是代理层的读写;原始对象若已存在属性,get会先查原始对象再走 trap - 对数组索引赋值(如
arr[0] = 1)会触发set,但push、pop等方法调用不会直接触发set,除非你在get中返回了被代理的数组方法(此时需手动包装) -
ownKeys+getOwnPropertyDescriptor需配合使用才能完全控制for...in、Object.keys()等枚举行为;漏掉后者会导致枚举时属性“消失”但实际可访问
用 Proxy 实现不可变对象要小心“浅代理”陷阱
很多人以为 new Proxy(obj, { set() { throw new Error() } }) 就能阻止修改——其实只能阻止顶层赋值。如果 obj.nested 是个普通对象,用户仍可自由修改 obj.nested.field。
真正安全的不可变封装需要递归代理嵌套对象,且必须在 get 返回值时判断类型并代理新对象:
立即学习“Java免费学习笔记(深入)”;
function deepFreeze(target) {
if (target && typeof target === 'object' && !target._frozen) {
Object.getOwnPropertyNames(target).forEach(prop => {
deepFreeze(target[prop]);
});
Object.freeze(target);
target._frozen = true;
}
return target;
}
function createImmutable(obj) {
return new Proxy(obj, {
set() { throw new TypeError('Cannot modify immutable object'); },
get(target, prop) {
const value = target[prop];
if (value && typeof value === 'object' && !value._frozen) {
return createImmutable(value); // 递归代理
}
return value;
}
});
}
注意:这种递归代理无法处理循环引用,且性能开销明显;生产环境建议用 immer 或 seamless-immutable 这类成熟方案。
apply 和 construct 陷阱让函数和类具备运行时重定向能力
这两个 trap 分别作用于函数调用和 new 表达式,是实现 AOP、Mock、兼容层的关键。比如你想让某个函数在开发环境自动打日志,又不想改原函数体:
-
apply(target, thisArg, argumentsList):拦截fn(...args)调用,可修改thisArg或argumentsList,甚至返回任意值(不必调用原函数) -
construct(target, argumentsList, newTarget):拦截new Fn(),必须返回一个对象(否则报错),可用于替换实例、注入依赖、强制单例 - 注意:
construct中不能返回原始值(如42或"str"),否则抛TypeError: function must return an object
示例:把任意构造函数变成单例
function singleton(ctor) {
let instance = null;
return new Proxy(ctor, {
construct(target, args) {
if (!instance) {
instance = Reflect.construct(target, args);
}
return instance;
}
});
}
调试和开发阶段用 Proxy 捕获隐式失败比 try/catch 更早
很多错误发生在属性访问阶段(如读取 undefined.name 报 Cannot read property 'name' of undefined),但传统错误捕获只能在执行后发生。用 get trap 可提前感知非法访问:
- 对
null或undefined做代理会立即报错,所以需先确保目标对象存在 - 可在
get中检查target[prop] === undefined并抛出自定义错误,附带调用栈信息 - 搭配
Reflect.get使用更安全,避免无限递归(例如在get中直接写target[prop]可能再次触发get)
真正难的是 trap 的性能损耗和调试复杂性——Chrome DevTools 对 Proxy 的展开支持有限,console.log(proxy) 显示为 Proxy {…},看不到内部结构;需要用 Reflect.ownKeys(proxy) 或 Object.getOwnPropertyDescriptors(proxy) 手动探测。









