Proxy 与 Reflect

定义

Proxy 与 Reflect 是 ES6 引入的一对元编程 API。Proxy 用于创建目标对象的代理,通过 handler 中的"陷阱"(trap)函数拦截对象的基本操作;Reflect 是一个内置对象,以函数形式提供这些基本操作的默认实现,方法签名与 Proxy 陷阱一一对应。

原理

可拦截的操作共十三种,包括 get、set、has(in 运算符)、deleteProperty、ownKeys、apply(函数调用)、construct(new)等。在陷阱内通常调用对应的 Reflect 方法完成默认行为,既保证语义正确(如正确传递 receiver 以处理 getter 中的 this),又能在前后插入自定义逻辑。

应用

最著名的应用是 Vue 3 的响应式系统:用 Proxy 包装数据对象,在 get 中收集依赖、set 中触发更新,克服了 Vue 2 基于 Object.defineProperty 无法监听新增属性与数组索引的缺陷。其他用途还包括数据校验、负索引数组、ORM 记录、mock 对象、不可变封装等。

局限

Proxy 无法被 polyfill 到 ES5 环境,有一定性能开销,且无法拦截严格相等比较等非基本操作。