JavaScript 内存泄漏：“永不消逝” 的变量

易航

2月20日发布

0 131 0

闭包最常见的陷阱就是内存泄漏。当一个闭包引用了外部函数的变量，而这个闭包又被长期持有（例如，作为事件处理程序或定时器回调），那么外部函数的变量就无法被垃圾回收，导致内存泄漏。

function createHandler() {
  let largeObject = new Array(1000000).fill("data"); // 创建一个大对象

  return function() {
    console.log("Handler clicked");
    //  没有直接使用 largeObject, 但由于闭包的存在, largeObject 无法被回收
  };
}

document.getElementById("myButton").addEventListener("click", createHandler());

在这个例子中，createHandler 函数返回一个事件处理函数（闭包）。这个闭包引用了 createHandler 函数的 largeObject 变量。即使我们没有在事件处理函数中直接使用 largeObject，但由于闭包的存在，largeObject 无法被垃圾回收，导致内存泄漏。

解决方法：

解除引用：在不需要闭包时，手动解除对闭包的引用，例如：

let handler = createHandler();
document.getElementById("myButton").addEventListener("click", handler);
// ... 当不再需要事件处理程序时 ...
document.getElementById("myButton").removeEventListener("click", handler);
handler = null; // 解除对闭包的引用

避免不必要的闭包：如果不需要访问外部函数的变量，就不要创建闭包。

将变量设置为null: 在闭包中, 将不再需要的外部变量手动设置为null。

图片[1] - JavaScript 内存泄漏：“永不消逝” 的变量 - 易航博客