当前位置：首页 > article >正文

闭包：前端开发的“记忆胶囊“与Vue框架的“隐身特工“

article 2025/3/7 2:35:57

一、闭包：JavaScript的时空穿梭机

1.1 闭包的本质揭秘

闭包就像《盗梦空间》中的记忆图腾，是函数执行结束后仍然保留的"平行宇宙"。当函数A返回函数B时，B就像带着A的"记忆背包"，里面装着A作用域内的变量。这个背包让B在任何地方执行时，都能取用A的私有物品。

技术定义：
• 函数嵌套结构
• 内部函数引用外部函数变量
• 外部函数执行环境销毁后，内部函数仍持有变量引用

function 太空站() {
  let 氧气存量 = 100%
  return function 宇航员() {
    氧气存量 -= 10%
    console.log(`剩余氧气：${氧气存量}`)
  }
}

const 执行任务 = 太空站()
执行任务() // 剩余氧气：90%
执行任务() // 剩余氧气：80%

1.2 闭包的三重境界

记忆之境：保存变量状态
封装之境：创建私有空间
操控之境：延迟执行与回调控制

二、闭包实战五重奏

2.1 状态保鲜库：计数器工厂

function createCounter() {
  let count = 0 // 闭包捕获的私有状态
  
  // 返回操作接口对象
  return {
    increment: () => ++count,
    decrement: () => --count,
    getCount: () => count
  }
}

// 使用示例
const counter = createCounter()
counter.increment() // 1
counter.decrement() // 0

2.2 事件监听特工队

function createButtons(num) {
  for (let i = 0; i < num; i++) {
    // 使用块级作用域+闭包保存每个按钮的索引
    const button = document.createElement('button')
    button.textContent = `Button ${i}`
    
    // 事件处理器闭包捕获当前i的值
    button.addEventListener('click', () => {
      console.log(`Clicked button ${i}`)
    })
    
    document.body.appendChild(button)
  }
}

// 现代解决方案（使用let+块级作用域）
function createButtonsModern(num) {
  for (let i = 0; i < num; i++) {
    const button = document.createElement('button')
    button.textContent = `Button ${i}`
    
    // 直接使用块级作用域的i
    button.onclick = () => console.log(`Clicked ${i}`)
    
    document.body.appendChild(button)
  }
}

2.3 模块化金库系统

const bankModule = (() => {
  // 私有状态
  let balance = 0

  // 公共接口
  return {
    deposit: amount => {
      balance += amount
      return balance
    },
    withdraw: amount => {
      balance -= amount
      return balance
    },
    checkBalance: () => `Current balance: $${balance}`
  }
})()

// 使用示例
bankModule.deposit(100)  // 100
bankModule.withdraw(30)  // 70

2.4 时空裂缝中的定时器

function createCountdown(seconds) {
  let remaining = seconds
  let timerId

  // 启动倒计时
  const start = () => {
    timerId = setInterval(() => {
      remaining--
      if (remaining <= 0) {
        clearInterval(timerId)
        console.log('Time up!')
      }
    }, 1000)
  }

  // 外部控制接口
  return {
    start,
    cancel: () => {
      clearInterval(timerId)
      console.log(`Stopped at ${remaining}s`)
    }
  }
}

// 使用示例
const countdown = createCountdown(10)
countdown.start()
// countdown.cancel()

2.5 函数式编程变形记

function createCookingTool(tool) {
  // 返回预配置的函数
  return ingredient => `${tool} 处理 ${ingredient}`
}

// 创建具体工具
const fryCook = createCookingTool('爆炒')
const steamCook = createCookingTool('清蒸')

console.log(fryCook('牛肉'))    // "爆炒处理牛肉"
console.log(steamCook('鱼')) // "清蒸处理鲜鱼"

三、Vue中的闭包特工行动

3.1 响应式系统的记忆蜘蛛网

Vue的响应式系统就像布满闭包的监控网络：

function defineReactive(obj, key) {
  const 仓库 = new Dep()
  
  let 值 = obj[key]
  
  Object.defineProperty(obj, key, {
    get() {
      if(Dep.target) {
        仓库.addSub(Dep.target)
      }
      return 值
    },
    set(newVal) {
      值 = newVal
      仓库.notify()
    }
  })
}

这里闭包捕获了仓库和值，形成持久的监控通道。

3.2 Computed属性的记忆水晶球

// 伪代码示例
function initComputed() {
  const watchers = {}
  
  for (const key in computed) {
    const 计算器 = () => computed[key].call(vm)
    
    watchers[key] = new Watcher(
      vm,
      计算器,
      () => {/* 回调 */},
      { lazy: true }
    )
    
    Object.defineProperty(vm, key, {
      get() {
        const watcher = watchers[key]
        if (watcher.dirty) {
          watcher.evaluate()
        }
        if (Dep.target) {
          watcher.depend()
        }
        return watcher.value
      }
    })
  }
}

计算属性通过闭包缓存计算结果，实现智能缓存。

3.3 生命周期钩子的时光胶囊

export default {
  created() {
    let 计数器 = 0
    
    this.$once('hook:beforeDestroy', () => {
      console.log('组件销毁前保存数据')
    })
    
    this._定时器 = setInterval(() => {
      console.log(`运行${++计数器}次`)
    }, 1000)
  },
  
  beforeDestroy() {
    clearInterval(this._定时器)
  }
}

这里的事件监听和定时器都通过闭包维持状态。

3.4 自定义指令的隐身斗篷

Vue.directive('resize-observer', {
  bind(el, { value: callback }) {
    // 使用防抖优化性能
    const debouncedCallback = Vue._.debounce(callback, 100)
    
    // 保存引用以便解除绑定
    const handler = () => debouncedCallback(el.getBoundingClientRect())
    el._resizeHandler = handler
    
    window.addEventListener('resize', handler)
  },
  
  unbind(el) {
    // 清理事件监听
    window.removeEventListener('resize', el._resizeHandler)
    delete el._resizeHandler
  }
})

事件监听器通过闭包记住参数，清理函数也封装在闭包中。

3.5 Mixin的共享记忆库

const 全局记忆 = () => {
  let 共享状态 = null
  
  return {
    data() {
      return {
        私有状态: 'secret'
      }
    },
    
    methods: {
      获取共享() {
        return 共享状态 || (共享状态 = Math.random())
      }
    }
  }
}

Mixin中的闭包实现跨组件状态共享，同时保持私有状态。

四、闭包陷阱与Vue最佳实践

4.1 内存泄漏黑洞

典型问题场景：

// 危险代码！
mounted() {
  window.addEventListener('resize', () => {
    this.updateLayout()
  })
}

// 正确做法
mounted() {
  const 回调 = () => this.updateLayout()
  window.addEventListener('resize', 回调)
  this.$once('hook:beforeDestroy', () => {
    window.removeEventListener('resize', 回调)
  })
}

4.2 性能优化三原则

避免在循环中创建闭包
及时清理事件监听
合理使用WeakMap进行弱引用

4.3 Vue3的Proxy革新

虽然Proxy取代了Object.defineProperty，但闭包仍在响应式系统中扮演重要角色：

function reactive(obj) {
  const 依赖库 = new Map()
  
  return new Proxy(obj, {
    get(target, key) {
      track(依赖库, key)
      return target[key]
    },
    set(target, key, value) {
      target[key] = value
      trigger(依赖库, key)
    }
  })
}

Proxy处理器仍然通过闭包持有依赖库引用。

五、闭包思维训练场

5.1 设计模式实战

实现发布订阅模式：

function createEventHub() {
  const 事件地图 = new Map()
  
  return {
    订阅: (事件名, 回调) => {
      const 订阅者 = 事件地图.get(事件名) || []
      订阅者.push(回调)
      事件地图.set(事件名, 订阅者)
    },
    
    发布: (事件名, 数据) => {
      (事件地图.get(事件名) || []).forEach(fn => fn(data))
    }
  }
}

5.2 算法挑战

闭包实现记忆化搜索：

function 斐波那契工厂() {
  const 记忆库 = new Map([[0, 0], [1, 1]])
  
  return function 记忆版斐波那契(n) {
    if (!记忆库.has(n)) {
      记忆库.set(n, 记忆版斐波那契(n-1) + 记忆版斐波那契(n-2))
    }
    return 记忆库.get(n)
  }
}