有哪些方法可以解决闭包导致的内存泄漏问题？

function setup() {
  const data = { value: "需要被释放的数据" };
  
  // 闭包：事件回调引用了data
  const handleClick = () => {
    console.log(data.value);
  };
  
  // 绑定事件
  document.addEventListener('click', handleClick);
  
  // 提供清理方法：解除引用
  return () => {
    // 关键：移除事件监听，切断闭包引用
    document.removeEventListener('click', handleClick);
  };
}

// 使用
const cleanup = setup();

// 当不再需要时（如组件卸载），调用清理方法
cleanup(); // 此时handleClick闭包及data可被GC回收

// 问题代码：循环创建闭包，每个闭包都引用i和data
const items = document.querySelectorAll('.item');
const data = { list: [] };

for (let i = 0; i < items.length; i++) {
  items[i].onclick = () => {
    console.log(`点击了第${i}项`, data.list);
  };
}

// 优化方案1：事件委托（只需要1个闭包）
document.querySelector('.list-container').addEventListener('click', (e) => {
  if (e.target.classList.contains('item')) {
    // 通过DOM属性获取索引，避免引用循环变量
    const index = e.target.dataset.index;
    console.log(`点击了第${index}项`, data.list);
  }
});

// 优化方案2：手动释放（适用于必须循环绑定的场景）
const cleanups = [];
for (let i = 0; i < items.length; i++) {
  const handler = () => console.log(`点击了第${i}项`);
  items[i].onclick = handler;
  cleanups.push(() => {
    items[i].onclick = null; // 清除闭包引用
  });
}

// 清理时调用
cleanups.forEach(clean => clean());

function heavyOperation() {
  // 大型对象（如包含大量数据的列表）
  const bigData = new Array(100000).fill('large-data');
  
  // 闭包引用bigData
  const process = () => {
    console.log(bigData.length);
  };
  
  // 执行一次操作
  process();
  
  // 关键：手动解除引用
  bigData = null; // 切断闭包对大对象的依赖
  
  return process;
}

const func = heavyOperation();
// 后续调用func时，bigData已为null，不会再占用大量内存

// 问题代码：多层嵌套闭包，引用链过长
function outer() {
  const config = { a: 1, b: 2 }; // 被内层闭包引用
  function middle() {
    const temp = [1, 2, 3]; // 被最内层闭包引用
    return function inner() {
      console.log(config.a + temp.length);
    };
  }
  return middle();
}

// 优化方案：精简作用域，只保留必要引用
function outer() {
  const configA = 1; // 只保留需要的属性，而非整个对象
  return function inner() {
    const temp = [1, 2, 3]; // 移到内层，避免被长期引用
    console.log(configA + temp.length);
  };
}

// 模块内部的闭包（随模块卸载而回收）
// data-processor.js
let cache = {};

export function process(key, value) {
  // 闭包引用cache
  const save = () => {
    cache[key] = value;
  };
  save();
  
  // 提供清理函数
  return () => {
    delete cache[key];
    cache = null; // 模块卸载时释放
  };
}

// 使用模块
import { process } from './data-processor.js';
const cleanup = process('id', 'value');

// 不需要时清理
cleanup();
// 模块卸载时，cache及闭包引用会被回收

// 问题：普通对象的键会强引用DOM元素，导致无法回收
const elementData = {};
function bindData(element, data) {
  // 闭包引用elementData
  element.onclick = () => {
    console.log(elementData[element.id]);
  };
  elementData[element.id] = data;
}

// 优化：用WeakMap存储，键为弱引用
const weakElementData = new WeakMap();
function bindData(element, data) {
  element.onclick = () => {
    console.log(weakElementData.get(element));
  };
  weakElementData.set(element, data); 
  // 当element被移除（如DOM删除），WeakMap的键会被GC自动回收
}