05. 闭包作用场景与内存泄漏规避策略

• 1. 闭包核心作用场景分析
• 2. 内存泄漏发生机制
• 3. 内存泄漏规避策略
• 4. 性能优化指标
• 5. 最佳实践方案

1. 闭包核心作用场景分析

闭包（Closure）本质是函数与其词法环境的组合体，主要应用于以下典型场景：

1. 状态保持与异步编程：在事件处理程序中保留上下文状态

   function createCounter() {
     let count = 0
     return function() {
       return ++count
     }
   }
   const counter = createCounter()
   console.log(counter()) // 1
   console.log(counter()) // 2

2. 模块化开发：实现私有变量和公共接口分离

   const calculator = (() => {
     let precision = 2
   
     function round(value) {
       return Number(value.toFixed(precision))
     }
   
     return {
       setPrecision: (n) => precision = n,
       add: (a, b) => round(a + b)
     }
   })()

3. 函数工厂模式：动态生成特定功能的函数

   function createMultiplier(factor) {
     return function(x) {
       return x * factor
     }
   }
   const double = createMultiplier(2)
   console.log(double(5)) // 10

4. 回调管理：在异步操作中保持上下文

   function fetchData(url, callback) {
     setTimeout(() => {
       const data = { response: "Sample data" }
       callback(data)
     }, 1000)
   }
   
   const processor = {
     process: function() {
       fetchData('/api', (data) => {
         this.handleResponse(data) // 保持 this 绑定
       })
     },
     handleResponse: function(data) {
       console.log(data.response)
     }
   }

2. 内存泄漏发生机制

内存泄漏主要发生在以下情况：

1. DOM 元素引用未释放：闭包中引用 DOM 元素，元素移除后引用未清除

   function createLeak() {
     const element = document.getElementById('myElement')
     element.addEventListener('click', () => {
       console.log('Clicked:', element.id) // 闭包持有 element 引用
     })
   }

2. 全局变量意外创建：未正确声明变量导致全局污染

   function createGlobal() {
     leakedVar = 'This becomes global' // 未使用 var/let/const
   }

3. 定时器未清理：闭包内创建的定时器未及时清除

   function startInterval() {
     const intervalId = setInterval(() => {
       console.log('Running...')
     }, 1000)
   
     // 忘记保存 intervalId 导致无法清除
   }

3. 内存泄漏规避策略

1. 引用管理技术

   // 显式解除引用
   function cleanUp() {
     const element = document.getElementById('target')
     const handler = () => console.log(element.id)
   
     element.addEventListener('click', handler)
   
     // 解绑时解除引用
     function removeListener() {
       element.removeEventListener('click', handler)
       element = null // 打破引用链
     }
   }

2. 弱引用应用：使用 WeakMap 避免强引用

   const weakMap = new WeakMap()
   
   function safeStorage(element) {
     const data = { clicks: 0 }
     weakMap.set(element, data)
   
     element.addEventListener('click', () => {
       const current = weakMap.get(element)
       current.clicks++
     })
   }

3. 内存监测技术：Chrome DevTools 内存检测流程

   1. 打开开发者工具 -> Memory 面板
   2. 创建堆快照（Heap Snapshot）
   3. 执行可疑操作
   4. 再次创建堆快照
   5. 对比两次快照的 Delta 值
   6. 查找未预期保留的 DOM 节点或闭包引用

4. 生命周期管理：框架中的典型处理方式（以 React 为例）

   useEffect(() => {
     const controller = new AbortController()
   
     fetch(url, { signal: controller.signal })
       .then(response => response.json())
   
     return () => {
       controller.abort() // 组件卸载时清理
     }
   }, [])

4. 性能优化指标

闭包内存占用评估公式：

$$M = S_c + \sum_{i=1}^{n}(S_{vi} + O_{vi})$$

其中：

• $M$ = 总内存占用
• $S_c$ = 闭包函数本身大小
• $S_{vi}$ = 捕获变量i的存储空间
• $O_{vi}$ = 变量 i 关联对象的开销

建议通过 Chrome Memory 面板的 Retained Size 指标监控闭包内存占用，正常应保持以下比例关系：

$$\frac{M_{\text{closure}}}{M_{\text{total}}} < 5\%$$

5. 最佳实践方案

1. 使用严格模式避免意外全局变量
2. 对 DOM 引用采用弱引用策略
3. 遵循“创建即规划销毁”原则
4. 复杂闭包采用模块化拆分
5. 定期进行内存分析（至少每季度一次）
6. 使用 linter 检测潜在泄漏模式

// 安全闭包模式示例
function createSafeClosure() {
  const data = new WeakMap()

  return {
    register: (element) => {
      const privateData = { count: 0 }
      data.set(element, privateData)
    
      const handler = () => {
        const current = data.get(element)
        current.count++
        console.log(`Clicks: ${current.count}`)
      }
    
      element.addEventListener('click', handler)
    
      // 返回清理方法
      return () => {
        element.removeEventListener('click', handler)
        data.delete(element)
      }
    }
  }
}