Proxy 是 JavaScript 的元编程拦截器,用于代理目标对象并自定义 get/set/has/deleteProperty 等基本操作;可实现响应式、只读视图、虚拟对象、函数调用增强等功能。

JavaScript 的 Proxy 对象是一个“拦截器”,它允许你为另一个对象(称为目标对象)创建一个代理,从而在访问或操作该对象时插入自定义逻辑。 它不是用来替代对象的,而是用来控制、观察甚至改写对对象的行为——比如读取属性、赋值、调用方法、判断是否存在等。它的核心价值在于“元编程”:在运行时干预对象的基本操作。
拦截对象的基本操作(如 get/set/deleteProperty)
这是 Proxy 最常用的功能。你可以精确控制属性怎么被读、怎么被写、甚至属性是否“存在”。
- get(target, prop, receiver):拦截属性读取。比如实现默认值、日志记录、响应式依赖收集(Vue 3 的响应式系统就基于此)。
- set(target, prop, value, receiver):拦截属性赋值。可用于数据校验(如禁止负数)、自动类型转换、触发更新通知。
- has(target, prop):拦截 in 操作符,可让属性“看似不存在”。例如隐藏内部字段或模拟稀疏数组。
- deleteProperty(target, prop):拦截 delete 操作,可拒绝删除关键属性。
实现不可变对象与防御性代理
Proxy 可以轻松封装一个只读视图,而无需深拷贝原始数据。
- 在 set、deleteProperty、defineProperty 等陷阱中直接抛错或静默忽略,就能创建一个“外表可读、实际不可改”的代理。
- 配合 Object.freeze() 使用更安全:Proxy 控制行为,freeze 防止代理本身被篡改。
- 适合做 API 返回值包装、配置对象保护、沙箱环境中的安全访问。
创建动态/虚拟对象(无真实属性的“幻影对象”)
目标对象甚至可以是空对象或 null,所有属性行为全由 Proxy 决定。
立即学习“Java免费学习笔记(深入)”;
- 比如 new Proxy({}, { get() { return Math.random(); } }),每次读任意属性都返回新随机数。
- 可模拟数据库查询对象:user.name 触发一次异步 fetch,结果缓存并返回 Promise。
- 路由对象、CSS-in-JS 主题访问器、Mock 数据生成器都依赖这种“按需计算”的能力。
函数代理与方法调用增强(apply 和 construct)
Proxy 不仅能代理普通对象,还能代理函数和类,控制调用过程。
- apply(target, thisArg, args):拦截函数调用。可用于日志、性能监控、参数预处理、防抖节流封装。
- construct(target, args, newTarget):拦截 new 调用。可实现自定义实例化逻辑,比如强制单例、注入依赖、返回缓存实例。
- 这对高阶函数工具库(如 Lodash 的 wrapper)、测试替身(mock function)、AOP 编程非常有用。










