探讨 JavaScript 中 Closure (闭包) 的内存管理问题，以及如何避免因不当使用闭包导致的内存泄漏。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

大家好，我是你们今天的JavaScript内存管理特邀讲师，人称“内存猎手”。今天咱们来聊聊JavaScript里一个既强大又容易让人头疼的家伙——闭包，以及它和内存管理之间的那些爱恨情仇。

咱们的目标是：让大家不仅能理解闭包，还能驾驭它，避免掉进内存泄漏的坑里！

一、什么是闭包？（别跟我说“函数和函数式编程”的官方定义！）

先别急着百度百科，咱用人话解释：

闭包，你可以把它想象成一个函数，它不仅带着自己的代码，还带着“记忆”。这个“记忆”指的是它诞生时（也就是定义时）所处的那个环境里的变量。即使这个函数离开了它出生的环境，它依然能访问和使用那些变量。

来，举个例子：

function 外层函数(外层变量) {
  function 内层函数() {
    console.log(外层变量); // 内层函数访问了外层函数的变量
  }
  return 内层函数;
}

const 我的闭包 = 外层函数("Hello, Closure!");
我的闭包(); // 输出: Hello, Closure!

在这个例子里，内层函数就是闭包。它被外层函数返回后，即使外层函数已经执行完毕，内层函数依然可以访问并使用外层函数的变量外层变量。这就是闭包的“记忆”功能。

二、闭包的威力：我能干什么？

闭包的用处可大了，掌握了它，你的代码水平能提升一个档次！

封装变量，实现私有性：

这是闭包最常见的用途之一。通过闭包，我们可以创建只能在函数内部访问的变量，防止外部代码随意修改，保护数据的安全。

function 创建计数器() {
  let count = 0; // 私有变量

  return {
    增加: function() {
      count++;
      console.log(count);
    },
    减少: function() {
      count--;
      console.log(count);
    },
    getValue: function() {
      return count; // 允许外部读取，但不能直接修改
    }
  };
}

const 计数器 = 创建计数器();
计数器.增加(); // 输出: 1
计数器.增加(); // 输出: 2
计数器.减少(); // 输出: 1
console.log(计数器.getValue()); // 输出: 1
// 计数器.count = 100; // 错误！无法直接访问 count

在这个例子中，count变量被封闭在创建计数器函数内部，外部代码无法直接访问和修改它，只能通过增加、减少和getValue方法来操作，实现了私有性。

创建模块：

闭包可以用来创建模块，将相关的代码组织在一起，形成一个独立的单元。这有助于代码的组织和复用。

const 我的模块 = (function() {
  let 私有变量 = "我是私有的";

  function 私有函数() {
    console.log("我是私有函数");
  }

  return {
    公共函数: function() {
      console.log("我是公共函数");
      私有函数(); // 公共函数可以访问私有函数
      console.log(私有变量); // 公共函数可以访问私有变量
    }
  };
})();

我的模块.公共函数(); // 输出: 我是公共函数, 我是私有函数, 我是私有的
// 我的模块.私有函数(); // 错误！无法访问私有函数
// console.log(我的模块.私有变量); // 错误！无法访问私有变量

这是一个立即执行函数表达式 (IIFE)，它创建了一个模块。模块内部的变量和函数都是私有的，只有通过返回的对象才能访问公共的接口。

保存状态：

闭包可以用来保存函数的状态，这在处理异步操作或者需要记住先前状态的场景中非常有用。

function 创建生成器(初始值) {
  let 当前值 = 初始值;

  return function() {
    当前值++;
    return 当前值;
  };
}

const 生成器 = 创建生成器(10);
console.log(生成器()); // 输出: 11
console.log(生成器()); // 输出: 12
console.log(生成器()); // 输出: 13

在这个例子中，当前值变量被闭包保存，每次调用生成器函数，它都会自增并返回新的值。

三、闭包的阴暗面：内存泄漏的陷阱！

闭包虽然强大，但如果使用不当，很容易造成内存泄漏。

啥是内存泄漏？

简单来说，就是你的程序占用的内存越来越多，但用完的内存却没有被释放，导致可用内存越来越少，最终可能导致程序崩溃。就像你租了个房子，用完之后不退租，白白浪费房租，而且还占着地方。

闭包怎么造成内存泄漏？

当闭包引用了外部函数的变量时，即使外部函数已经执行完毕，这些变量仍然会保存在内存中，直到闭包不再被使用。如果这些变量占用了大量的内存，而且闭包一直存在，就会导致内存泄漏。

举个“栗子”：

function 创建大数据闭包() {
  let 大数据 = new Array(1000000).fill("很大的数据"); // 创建一个占用大量内存的数组

  return function() {
    console.log(大数据[0]); // 闭包引用了大数据
  };
}

let 我的大数据闭包 = 创建大数据闭包();
我的大数据闭包(); // 使用闭包
// 我的大数据闭包 = null; // 如果不手动释放，大数据将一直保存在内存中

在这个例子中，大数据数组占用了大量的内存。即使创建大数据闭包函数已经执行完毕，大数据数组仍然会保存在内存中，因为我的大数据闭包函数引用了它。如果不手动将我的大数据闭包设置为null，大数据数组将一直存在，导致内存泄漏。

四、如何避免闭包引起的内存泄漏？（秘籍在此！）

掌握以下几点，让你远离内存泄漏的噩梦！

谨慎使用全局变量：

尽量避免在闭包中引用全局变量。全局变量的生命周期很长，很容易导致闭包一直引用它们，从而造成内存泄漏。
及时解除引用：

当闭包不再需要时，手动将它设置为null，解除对外部变量的引用。这可以告诉垃圾回收器，这些变量可以被回收了。
```
let 我的大数据闭包 = 创建大数据闭包();
我的大数据闭包(); // 使用闭包
我的大数据闭包 = null; // 释放闭包
```

避免循环引用：

循环引用是指两个或多个对象互相引用，导致垃圾回收器无法判断它们是否可以被回收。在闭包中，也要避免循环引用。

function 创建循环引用() {
  let obj1 = {};
  let obj2 = {};

  obj1.a = obj2; // obj1 引用 obj2
  obj2.b = obj1; // obj2 引用 obj1

  return function() {
    console.log(obj1.a);
  };
}

let 循环引用闭包 = 创建循环引用();
循环引用闭包(); // 使用闭包
// 循环引用闭包 = null; // 即使将闭包设置为 null，obj1 和 obj2 仍然相互引用，无法被回收
// obj1.a = null;  // 解除 obj1 对 obj2 的引用
// obj2.b = null;  // 解除 obj2 对 obj1 的引用
// 循环引用闭包 = null; // 释放闭包，现在 obj1 和 obj2 可以被回收了

在这个例子中，obj1和obj2相互引用，即使将循环引用闭包设置为null，它们仍然无法被回收。需要手动解除它们之间的引用才能避免内存泄漏。

使用工具进行内存分析：

可以使用浏览器的开发者工具或者专业的内存分析工具来检测内存泄漏。这些工具可以帮助你找到占用大量内存的对象，并分析它们的引用关系。
- Chrome DevTools: Chrome浏览器的开发者工具提供了强大的内存分析功能。你可以使用 Timeline 或者 Memory 面板来记录内存使用情况，并找到潜在的内存泄漏。
- Node.js 的 heapdump 模块: 如果你是在 Node.js 环境下，可以使用 heapdump 模块来生成堆快照，然后使用 Chrome DevTools 或者其他工具来分析。
使用WeakMap和WeakSet:

WeakMap 和 WeakSet 是 ES6 引入的新的数据结构，它们可以用来存储对象，但是不会阻止垃圾回收器回收这些对象。这意味着，如果一个对象只被 WeakMap 或 WeakSet 引用，那么它就可以被垃圾回收器回收。这可以有效地避免内存泄漏。
```
let weakMap = new WeakMap();
let element = document.getElementById('myElement');

weakMap.set(element, { data: '一些数据' });

// 当 element 从 DOM 中移除后，weakMap 中的键值对也会被自动移除，避免内存泄漏
```
在这个例子中，weakMap 存储了 DOM 元素 element 和一些相关的数据。当 element 从 DOM 中移除后，weakMap 中的键值对也会被自动移除，避免了内存泄漏。

五、实战演练：一个常见的闭包陷阱和解决方案

function 创建按钮列表(数量) {
  let 按钮列表 = [];
  for (var i = 0; i < 数量; i++) { // 注意：这里使用的是 var
    let 按钮 = document.createElement("button");
    按钮.textContent = "按钮 " + i;
    按钮.addEventListener("click", function() {
      console.log("你点击了按钮 " + i); // 闭包引用了 i
    });
    按钮列表.push(按钮);
  }
  return 按钮列表;
}

let 按钮组 = 创建按钮列表(5);
按钮组.forEach(function(按钮) {
  document.body.appendChild(按钮);
});

问题：

当你点击任何一个按钮时，控制台都会输出 你点击了按钮 5。这是因为 var 声明的变量 i 的作用域是整个 创建按钮列表 函数，当循环结束时，i 的值变成了 5。所有的闭包都引用了同一个 i，所以它们都输出了 5。

解决方案：

使用 let 声明变量 i，或者使用立即执行函数表达式 (IIFE) 来创建新的作用域。

方案一：使用 let 声明变量 i

function 创建按钮列表(数量) {
  let 按钮列表 = [];
  for (let i = 0; i < 数量; i++) { // 使用 let 声明 i
    let 按钮 = document.createElement("button");
    按钮.textContent = "按钮 " + i;
    按钮.addEventListener("click", function() {
      console.log("你点击了按钮 " + i); // 闭包引用了 i
    });
    按钮列表.push(按钮);
  }
  return 按钮列表;
}

使用 let 声明的变量 i 的作用域是循环体，每次循环都会创建一个新的 i，所以每个闭包都引用了不同的 i，输出了正确的值。

方案二：使用 IIFE 创建新的作用域

function 创建按钮列表(数量) {
  let 按钮列表 = [];
  for (var i = 0; i < 数量; i++) { // 注意：这里使用的是 var
    (function(index) { // 使用 IIFE 创建新的作用域
      let 按钮 = document.createElement("button");
      按钮.textContent = "按钮 " + index;
      按钮.addEventListener("click", function() {
        console.log("你点击了按钮 " + index); // 闭包引用了 index
      });
      按钮列表.push(按钮);
    })(i); // 将 i 作为参数传递给 IIFE
  }
  return 按钮列表;
}

IIFE 创建了一个新的作用域，并将 i 作为参数 index 传递给它。每个 IIFE 都有自己的 index 变量，所以每个闭包都引用了不同的 index，输出了正确的值。

六、总结：驾驭闭包，内存无忧！

闭包是 JavaScript 中一个非常强大的特性，它可以用来实现封装、模块化和状态保存。但是，如果使用不当，闭包也很容易造成内存泄漏。

要避免闭包引起的内存泄漏，需要注意以下几点：

谨慎使用全局变量。
及时解除引用。
避免循环引用。
使用工具进行内存分析。
使用 WeakMap 和 WeakSet。

希望今天的讲座能帮助大家更好地理解和使用闭包，避免掉进内存泄漏的陷阱。记住，内存管理是前端开发中非常重要的一部分，掌握它能让你的代码更加健壮和高效！

好了，今天的“内存猎手”讲座就到这里，祝大家代码无bug，内存无忧！

发表回复 取消回复

发表回复取消回复