面试题：JavaScript 闭包兼容性优化中的内存管理

闭包可能导致的内存泄漏场景

循环引用导致的内存泄漏
- 场景描述：当闭包内部引用了外部函数的变量，同时外部函数的变量又引用了闭包内部的对象，形成循环引用时，可能会导致内存泄漏。例如：
```
function outer() {
  let largeObject = { data: new Array(1000000) };
  return function inner() {
    console.log(largeObject.data.length);
    return largeObject;
  };
}
let closure = outer();
// 这里闭包 inner 引用了 largeObject，若 largeObject 又引用了 inner，就形成循环引用
```
- 原因：JavaScript 的垃圾回收机制（通常采用标记 - 清除算法）依赖于对象是否可到达。当存在循环引用时，尽管这些对象可能不再被程序的其他部分直接使用，但垃圾回收器无法识别它们为垃圾，从而导致内存无法释放。
未释放的 DOM 引用
- 场景描述：在浏览器环境中，如果闭包持有对 DOM 元素的引用，而该 DOM 元素从文档中移除后，闭包仍然存在，就可能导致内存泄漏。比如：
```
function createClosure() {
  let element = document.getElementById('myElement');
  return function() {
    console.log(element.textContent);
  };
}
let closure = createClosure();
document.body.removeChild(document.getElementById('myElement'));
// 此时闭包 closure 仍持有对已移除 DOM 元素的引用
```
- 原因：DOM 元素在从文档中移除后，理论上应该可以被垃圾回收。但由于闭包的存在，该 DOM 元素仍被引用，导致无法被回收，占用内存。
事件监听器未移除
- 场景描述：当在闭包内部添加了事件监听器，而在适当的时候没有移除这些监听器，就可能造成内存泄漏。例如：
```
function addClickListener() {
  let button = document.createElement('button');
  button.textContent = 'Click me';
  document.body.appendChild(button);
  return function() {
    button.addEventListener('click', function() {
      console.log('Button clicked');
    });
  };
}
let closure = addClickListener();
// 这里闭包内添加了 click 事件监听器，但没有移除
```
- 原因：事件监听器会使 DOM 元素和闭包之间建立引用关系。如果不手动移除事件监听器，即使闭包和相关 DOM 元素在程序逻辑上不再需要，由于相互引用的存在，垃圾回收器无法回收它们占用的内存。

优化策略避免内存泄漏问题

打破循环引用
- 策略：在适当的时候将循环引用中的引用设置为 null，以便垃圾回收器能够识别对象为垃圾并回收内存。例如，对于前面提到的可能形成循环引用的例子，可以在外部函数返回闭包后，手动打破引用：
```
function outer() {
  let largeObject = { data: new Array(1000000) };
  return function inner() {
    console.log(largeObject.data.length);
    return largeObject;
  };
}
let closure = outer();
largeObject = null; // 打破引用
```

释放 DOM 引用

策略：当 DOM 元素不再需要时，确保闭包不再持有对该 DOM 元素的引用。可以在移除 DOM 元素之前，将闭包中对该 DOM 元素的引用设置为 null。例如：

function createClosure() {
  let element = document.getElementById('myElement');
  return function() {
    console.log(element.textContent);
  };
}
let closure = createClosure();
let elementToRemove = document.getElementById('myElement');
closure = null; // 先让闭包不再引用 DOM 元素
document.body.removeChild(elementToRemove);

移除事件监听器

策略：在闭包不再需要时，或者相关 DOM 元素被移除时，手动移除添加的事件监听器。例如：

function addClickListener() {
  let button = document.createElement('button');
  button.textContent = 'Click me';
  document.body.appendChild(button);
  let clickHandler = function() {
    console.log('Button clicked');
  };
  button.addEventListener('click', clickHandler);
  return function() {
    button.removeEventListener('click', clickHandler);
  };
}
let closure = addClickListener();
// 当闭包不再需要时，调用闭包移除事件监听器
closure();

合理使用 WeakMap 和 WeakSet

策略：WeakMap 和 WeakSet 是 JavaScript 提供的弱引用数据结构。它们的键或值如果是对象，当这些对象没有其他强引用时，垃圾回收器可以直接回收它们，不会造成内存泄漏。例如，当需要存储一些与 DOM 元素相关的临时数据，可以使用 WeakMap：

let weakMap = new WeakMap();
function processElement(element) {
  let data = { /* 一些相关数据 */ };
  weakMap.set(element, data);
  return function() {
    let storedData = weakMap.get(element);
    // 使用 storedData
  };
}
let element = document.getElementById('myElement');
let closure = processElement(element);
document.body.removeChild(element);
// 由于使用 WeakMap，即使闭包存在，当 element 没有其他强引用时，可被垃圾回收

星途面试题库

面试题：JavaScript 闭包兼容性优化中的内存管理

知识考点

面试题答案

闭包可能导致的内存泄漏场景

优化策略避免内存泄漏问题