JavaScript 中闭包怎么在响应式数据依赖收集代理中保存订阅集合-js教程-PHP中文网

闭包的核心作用是为每个响应式属性的 getter 提供独立、持久、私有的订阅集合（如 Set），实现“谁读了我，我就记住谁”的依赖收集；其原理是在 defineProperty 或 Proxy 的 get trap 中，通过闭包捕获并维护该属性专属的 deps 集合，避免全局污染或重复创建。

javascript 中闭包怎么在响应式数据依赖收集代理中保存订阅集合

闭包在响应式数据依赖收集代理中，核心作用是**让每个响应式属性的 getter 拥有独立、持久、私有的订阅集合（如 Set）**，从而实现“谁读了我，我就记住谁”——这正是依赖收集的关键。

闭包保存订阅集合的原理

在 Proxy 的 get 拌手（trap）中，每次访问属性时，需要把当前正在执行的副作用函数（如 render）添加到该属性对应的依赖集合里。这个集合不能挂到全局或共享对象上，否则会交叉污染；也不能每次 new 一个，否则旧依赖就丢了。闭包提供了一个天然的私有作用域：

在定义响应式对象时，为每个属性单独创建一个闭包环境
该闭包内声明一个 let deps = new Set()，对外不可直接访问
get trap 在其中调用 deps.add(activeEffect)，add 的是当前活跃的副作用
set trap 触发更新时，遍历并执行 deps.forEach(fn => fn())

典型实现结构（简化版）

以 Vue 3 的 reactive + effect 逻辑为参考，关键不是 Proxy 本身，而是闭包如何配合：

function createDep() {
  const deps = new Set()
  return {
    add: (effect) => deps.add(effect),
    delete: (effect) => deps.delete(effect),
    notify: () => deps.forEach(fn => fn())
  }
}

function reactive(obj) {
  return new Proxy(obj, {
    get(target, key, receiver) {
      // 从闭包中获取该 key 对应的 dep 实例
      const dep = getDep(target, key) // 例如用 WeakMap 缓存 {target → Map<key dep>}
      if (activeEffect) {
        dep.add(activeEffect) // 闭包内的 deps 被安全捕获
      }
      return Reflect.get(target, key, receiver)
    },
    set(target, key, value, receiver) {
      const result = Reflect.set(target, key, value, receiver)
      const dep = getDep(target, key)
      dep.notify() // 执行所有订阅者
      return result
    }
  })
}</key>

这里 createDep 返回的对象内部始终持有对自身 deps 的引用，而 Proxy 的 get/set 每次都复用这个闭包绑定的 dep 实例——这就是闭包保存状态的本质。