17370845950

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 决定。

• 比如 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 编程非常有用。