闭包的内存模型与生命周期

闭包的内存模型与生命周期

闭包（Closure）是函数与其词法环境的组合体。当内部函数引用了外部函数的变量时，即使外部函数已经执行完毕，这些变量仍然存活在内存中。闭包是 JavaScript 中模块化、数据封装、函数工厂的基础，但不当使用会导致内存泄漏。理解 V8 中闭包的内存模型对性能优化至关重要。

---

目录

1. 闭包的定义与形成条件
2. V8 中闭包的内存表示
3. Context 对象与变量捕获
4. 闭包的生命周期
5. 闭包与垃圾回收
6. 常见内存泄漏模式
7. 闭包的经典应用模式
8. 实战案例
9. 深度追问
10. 总结表格

---

1. 闭包的定义与形成条件

根据 ECMAScript 规范，函数对象在创建时会捕获当前执行上下文的词法环境（§10.2）：

// 代码示例 1：闭包的基本形成
function createCounter() {
  let count = 0; // 被闭包捕获的自由变量
  
  return {
    increment() { return ++count; },
    decrement() { return --count; },
    getCount() { return count; }
  };
}

const counter = createCounter();
console.log(counter.increment()); // 1
console.log(counter.increment()); // 2
console.log(counter.getCount()); // 2

// createCounter 已执行完毕，但 count 仍存活

闭包形成的必要条件

1. 函数嵌套（内部函数引用外部变量）
2. 内部函数被外部引用（逃逸）
3. 外部函数执行完毕后，内部函数仍可访问外部变量

// 代码示例 2：未形成闭包的情况
function noClosureNeeded() {
  let x = 10;
  let y = 20;
  
  function inner() {
    return x + 1; // 只引用了 x
  }
  
  return inner(); // inner 未逃逸，直接执行并返回结果
  // 此时 V8 可能通过逃逸分析将 x 分配在栈上
}

---

2. V8 中闭包的内存表示

在 V8 中，闭包通过 Context 对象实现：

// 概念模型：V8 内部结构
// JSFunction = {
//   code: <编译后的字节码/机器码>,
//   context: <Context 对象>,  ← 闭包的关键
//   feedback_vector: <类型反馈>,
//   ...
// }
//
// Context = {
//   parent: <父级 Context 或 null>,
//   slots: [var1, var2, ...]  ← 被捕获的变量
// }

// 代码示例 3：验证 Context 共享
function outer() {
  let shared = 'hello';
  let notShared = 'world'; // 如果未被内部函数引用，V8 不会捕获
  
  function innerA() { return shared; }
  function innerB() { return shared; }
  
  return [innerA, innerB];
}

const [fnA, fnB] = outer();
// fnA 和 fnB 共享同一个 Context 对象
// 修改 shared 对两者都可见

使用 DevTools 观察闭包

// 在 Chrome DevTools 中：
// 1. 设置断点
// 2. 查看 Scope → Closure
function debugClosure() {
  const largeData = new Array(1000000).fill('x');
  const importantValue = 42;
  
  return function() {
    debugger; // 在这里查看 Scope 面板
    return importantValue;
    // largeData 如果未被引用，V8 可能不捕获（取决于是否使用 eval）
  };
}

---

3. Context 对象与变量捕获

V8 的精确捕获分析

// 代码示例 4：V8 只捕获被引用的变量
function preciseCapture() {
  let captured = 'I am captured';
  let notCaptured = 'I am free';  // 不会进入 Context
  const bigArray = new Array(1000000); // 是否捕获取决于引用
  
  return function() {
    return captured; // 只有 captured 在 Context 中
  };
}

// 但 eval 会阻止优化！
function evalBreaksOptimization() {
  let a = 1, b = 2, c = 3;
  
  return function(code) {
    return eval(code); // V8 必须捕获所有变量！
  };
}

共享 Context 的陷阱

// 代码示例 5：Context 共享导致的意外内存保持
function createHandlers() {
  const hugeData = new Array(1000000).fill('*'); // 10MB+
  const smallValue = 42;
  
  // handler1 引用 hugeData
  const handler1 = function() { return hugeData.length; };
  
  // handler2 只引用 smallValue，但因为共享 Context，hugeData 也被保持！
  const handler2 = function() { return smallValue; };
  
  return { handler1, handler2 };
}

// 解决方案：分离作用域
function createHandlersFixed() {
  const handler1 = (() => {
    const hugeData = new Array(1000000).fill('*');
    return function() { return hugeData.length; };
  })();
  
  const handler2 = (() => {
    const smallValue = 42;
    return function() { return smallValue; };
  })();
  
  return { handler1, handler2 };
}

---

4. 闭包的生命周期

// 代码示例 6：闭包生命周期跟踪
function lifecycle() {
  console.log('1. 外部函数开始执行');
  
  let value = 'alive';
  const ref = new WeakRef({ marker: 'closure-data' });
  
  const closure = function() {
    console.log('3. 闭包被调用，value =', value);
    return value;
  };
  
  console.log('2. 外部函数执行完毕，返回闭包');
  return closure;
}

const fn = lifecycle();
// 输出: 1 → 2

fn(); // 输出: 3. 闭包被调用，value = alive

// 释放闭包
// fn = null; // 此时 Context 对象可被 GC

---

5. 闭包与垃圾回收

// 代码示例 7：闭包阻止 GC 的典型场景
class EventManager {
  #listeners = new Map();
  
  subscribe(event, callback) {
    if (!this.#listeners.has(event)) {
      this.#listeners.set(event, new Set());
    }
    this.#listeners.get(event).add(callback);
    
    // 返回取消订阅函数（这是一个闭包）
    return () => {
      this.#listeners.get(event)?.delete(callback);
    };
  }
}

// 问题：如果不调用取消函数，callback 和其闭包变量永远不会释放
function problematicComponent() {
  const heavyState = new Array(100000).fill(0);
  const manager = new EventManager();
  
  // 这个闭包会保持 heavyState 存活
  const unsub = manager.subscribe('update', () => {
    processData(heavyState);
  });
  
  // 组件销毁时必须调用 unsub()！
}

WeakRef 与 FinalizationRegistry

// 使用 WeakRef 避免闭包保持强引用
class SmartCache {
  #cache = new Map();
  #registry = new FinalizationRegistry(key => {
    console.log(`${key} was garbage collected`);
    this.#cache.delete(key);
  });
  
  set(key, value) {
    const ref = new WeakRef(value);
    this.#cache.set(key, ref);
    this.#registry.register(value, key);
  }
  
  get(key) {
    const ref = this.#cache.get(key);
    return ref?.deref(); // 可能返回 undefined（已被 GC）
  }
}

---

6. 常见内存泄漏模式

// 代码示例 8：DOM 引用导致的泄漏
function setupHandler() {
  const element = document.getElementById('button');
  const heavyData = loadHeavyData(); // 大量数据
  
  element.addEventListener('click', function handler() {
    // 这个闭包持有 heavyData 的引用
    console.log(heavyData.summary);
  });
  
  // 即使 element 从 DOM 中移除，如果 handler 未清理：
  // element → handler（闭包）→ heavyData 全部无法释放
}

// 修复方案
function setupHandlerFixed() {
  const element = document.getElementById('button');
  const heavyData = loadHeavyData();
  const summary = heavyData.summary; // 只提取需要的数据
  
  const handler = function() {
    console.log(summary); // 只捕获小数据
  };
  
  element.addEventListener('click', handler);
  
  // 返回清理函数
  return () => element.removeEventListener('click', handler);
}

定时器泄漏

// 代码示例 9：定时器中的闭包泄漏
function startPolling() {
  const connection = createConnection(); // 持有 socket
  const buffer = new ArrayBuffer(1024 * 1024); // 1MB
  
  // ⚠️ 如果不清除定时器，connection 和 buffer 永远不会释放
  const timerId = setInterval(() => {
    if (connection.isOpen) {
      connection.send(buffer);
    }
  }, 1000);
  
  return {
    stop() {
      clearInterval(timerId);
      connection.close();
      // 此时闭包中的引用可以被 GC
    }
  };
}

---

7. 闭包的经典应用模式

模块模式

// 代码示例 10：IIFE 模块模式
const Module = (function() {
  // 私有状态
  let _privateCount = 0;
  const _privateMethod = () => _privateCount++;
  
  // 公开 API
  return {
    increment() {
      _privateMethod();
      return this;
    },
    getCount() {
      return _privateCount;
    },
    reset() {
      _privateCount = 0;
      return this;
    }
  };
})();

Module.increment().increment().increment();
console.log(Module.getCount()); // 3

函数工厂

// 柯里化工厂
function createMultiplier(factor) {
  return function(number) {
    return number * factor;
  };
}

const double = createMultiplier(2);
const triple = createMultiplier(3);

console.log(double(5));  // 10
console.log(triple(5));  // 15

// 带配置的验证器工厂
function createValidator(rules) {
  const compiledRules = rules.map(rule => ({
    test: new RegExp(rule.pattern),
    message: rule.message
  }));
  
  return function validate(value) {
    const errors = [];
    for (const rule of compiledRules) {
      if (!rule.test.test(value)) {
        errors.push(rule.message);
      }
    }
    return { valid: errors.length === 0, errors };
  };
}

const validateEmail = createValidator([
  { pattern: '^.+@.+\\..+$', message: 'Invalid email format' },
  { pattern: '^.{5,}$', message: 'Email too short' }
]);

记忆化（Memoization）

function memoize(fn, keyResolver = (...args) => JSON.stringify(args)) {
  const cache = new Map();
  
  const memoized = function(...args) {
    const key = keyResolver(...args);
    
    if (cache.has(key)) {
      return cache.get(key);
    }
    
    const result = fn.apply(this, args);
    cache.set(key, result);
    return result;
  };
  
  memoized.cache = cache; // 暴露 cache 以便手动清理
  memoized.clear = () => cache.clear();
  
  return memoized;
}

const fibonacci = memoize(function fib(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
});

console.log(fibonacci(100)); // 瞬间完成

---

8. 实战案例

实战案例 1：防抖与节流的闭包实现

// 防抖：闭包保存 timer
function debounce(fn, delay, { leading = false, trailing = true } = {}) {
  let timer = null;
  let lastCallTime = 0;
  
  return function debounced(...args) {
    const now = Date.now();
    const elapsed = now - lastCallTime;
    
    clearTimeout(timer);
    
    if (leading && elapsed >= delay) {
      lastCallTime = now;
      fn.apply(this, args);
    }
    
    if (trailing) {
      timer = setTimeout(() => {
        lastCallTime = Date.now();
        fn.apply(this, args);
      }, delay);
    }
  };
}

// 节流：闭包保存上次执行时间
function throttle(fn, interval) {
  let lastTime = 0;
  let timer = null;
  
  return function throttled(...args) {
    const now = Date.now();
    const remaining = interval - (now - lastTime);
    
    if (remaining <= 0) {
      clearTimeout(timer);
      timer = null;
      lastTime = now;
      fn.apply(this, args);
    } else if (!timer) {
      timer = setTimeout(() => {
        lastTime = Date.now();
        timer = null;
        fn.apply(this, args);
      }, remaining);
    }
  };
}

实战案例 2：React Hooks 中的闭包陷阱

function ChatRoom({ roomId }) {
  const [message, setMessage] = useState('');
  
  // ⚠️ 闭包陷阱：effect 捕获了旧的 message
  useEffect(() => {
    const connection = createConnection(roomId);
    connection.on('message', (msg) => {
      // 这里的 message 是 effect 创建时的值！
      console.log('Current message:', message); // 永远是初始值
    });
    return () => connection.disconnect();
  }, [roomId]); // message 不在依赖数组中
  
  // ✅ 修复：使用 ref 存储最新值
  const messageRef = useRef(message);
  messageRef.current = message;
  
  useEffect(() => {
    const connection = createConnection(roomId);
    connection.on('message', () => {
      console.log('Current message:', messageRef.current); // 始终最新
    });
    return () => connection.disconnect();
  }, [roomId]);
}

实战案例 3：连接池的闭包管理

function createConnectionPool(config) {
  const { maxSize = 10, factory, destroyer } = config;
  
  // 闭包中的池状态
  let pool = [];
  let activeCount = 0;
  let waitQueue = [];
  
  async function acquire() {
    if (pool.length > 0) {
      activeCount++;
      return pool.pop();
    }
    
    if (activeCount < maxSize) {
      activeCount++;
      return await factory();
    }
    
    // 等待释放
    return new Promise(resolve => {
      waitQueue.push(resolve);
    });
  }
  
  function release(connection) {
    if (waitQueue.length > 0) {
      const resolve = waitQueue.shift();
      resolve(connection);
    } else {
      activeCount--;
      pool.push(connection);
    }
  }
  
  async function drain() {
    for (const conn of pool) {
      await destroyer(conn);
    }
    pool = [];
    activeCount = 0;
  }
  
  return { acquire, release, drain, getStats: () => ({ activeCount, poolSize: pool.length, waiting: waitQueue.length }) };
}

---

9. 深度追问

Q1：V8 的逃逸分析如何影响闭包性能？

如果 TurboFan 能证明闭包不会逃逸（即不会被传递到外部作用域），它可以将捕获的变量分配在栈上而非堆上，完全避免 Context 对象的分配。这被称为"标量替换"（Scalar Replacement）。

Q2：为什么 eval 会阻止闭包优化？

因为 eval 可以动态访问任何变量名，编译器无法静态分析哪些变量会被访问，因此必须保守地将所有局部变量放入 Context。使用 new Function() 代替 eval 不会有此问题，因为它在全局作用域创建函数。

Q3：Chrome DevTools 的 Memory 面板如何定位闭包泄漏？

1. 录制 Heap Snapshot
2. 按 "Retained Size" 排序
3. 查找 (closure) 类型的对象
4. 通过 Retainers 面板追踪引用链
5. 对比两次 Snapshot 找出增量

---

10. 总结表格

闭包模式	用途	内存风险
模块模式	数据封装	低（单例）
函数工厂	配置化函数	低（小闭包）
记忆化	缓存计算	中（cache 无限增长）
事件处理	回调绑定	高（需手动清理）
定时器	延迟执行	高（需 clearTimeout）

优化策略	说明
最小化捕获	只引用必要变量
分离作用域	大数据和闭包函数分离
手动置 null	不需要时释放引用
WeakRef/WeakMap	弱引用避免泄漏
清理函数	返回 destroy/cleanup 方法
避免 eval	防止全量捕获

---

下一篇：06. 宏任务、微任务与浏览器渲染循环