17370845950

Proxy 是 JavaScript 中用于拦截并自定义对象基本操作的构造函数，通过代理层实现数据劫持；支持 13 种 trap，如 get、set、has、deleteProperty、ownKeys 等；可天然监听动态属性、数组操作及嵌套对象，但需手动处理深层响应式与数组方法；相比 Object.defineProperty，Proxy 更强大灵活，但不兼容 IE。

Proxy 是 JavaScript 中用于拦截并自定义对象基本操作的构造函数，它不是直接修改对象本身，而是创建一个“代理层”，让所有对目标对象的访问都经过这个中间层——这正是实现数据劫持的核心机制。

Proxy 能拦截哪些操作？

Proxy 支持 13 种可拦截的操作（trap），常用包括：

• get：读取属性时触发，适合监听依赖收集（如 Vue 响应式）
• set：设置属性时触发，适合响应式更新、数据校验、自动转换
• has：in 操作符触发，可隐藏属性
• deleteProperty：delete 操作触发，控制删除权限
• ownKeys：Object.keys / for...in 触发，可过滤或添加枚举属性

用 Proxy 实现基础响应式数据劫持

与 Object.defineProperty 不同，Proxy 可以监听动态新增/删除属性、数组索引赋值、length 修改等，天然支持数组和嵌套对象。

简单示例：拦截 set/get，打印变化并触发更新函数：

function reactive(obj, onUpdate) {
  return new Proxy(obj, {
    get(target, key, receiver) {
      console.log(`读取 ${key}`);
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      console.log(`设置 ${key} =`, value);
      const result = Reflect.set(target, key, value, receiver);
      onUpdate && onUpdate(); // 触发视图更新
      return result;
    }
  });
}

const state = reactive({ count: 0 }, () => console.log('视图需刷新'));
state.count++; // 输出：设置 count = 1 → 视图需刷新

注意深层响应式与陷阱

Proxy 默认只代理第一层。要实现嵌套对象响应式，需在 get 中递归代理：

• 每次 get 返回值是对象时，自动 wrap 一层 Proxy（避免重复代理，可用 WeakMap 缓存）
• set 时若新值是对象，也要递归 reactive 它
• 数组方法如 push/pop 会触发 set（如修改 length）或 ownKeys（影响 for...in），但不会触发 set(index)，需额外处理或重写数组方法
• Proxy 无法拦截普通函数调用、instanceof、typeof 等操作，这些需配合其他手段（如封装函数、使用 Reflect）

Proxy vs Object.defineProperty 的关键区别

• Proxy 代理整个对象，defineProperty 只能逐个属性定义
• Proxy 支持数组索引、length、新增属性的劫持；defineProperty 对数组索引无效，新增属性需重新 define
• Proxy 有更丰富的拦截能力（如 construct、apply），适合实现类、函数代理
• 兼容性：Proxy 不支持 IE，需考虑项目环境；defineProperty 兼容性更好（IE9+）

基本上就这些。Proxy 让数据劫持变得更自然、更彻底，现代响应式框架（Vue 3、SolidJS）都基于它构建核心响应系统。不复杂但容易忽略的是：它只是“拦截器”，真正驱动更新还需要依赖收集、副作用调度等配套设计。