JS内存泄漏：从入门到精通！

2024-01-07 19:18:43

JavaScript 内存泄漏：从入门到精通

什么是内存泄漏？

内存泄漏就像房间里堆积如山的杂物——占据着宝贵的空间，却毫无用处。在计算机的世界里，它指的是不再使用的内存空间，由于某种原因没有被回收，导致内存占用不断增加，最终让程序不堪重负，哀嚎不止。在 JavaScript 中，这种混乱通常发生在闭包和事件处理程序中。

闭包引起的内存泄漏

闭包就像套娃，内部函数紧紧抓住外部变量不放，即使外部函数已经光荣退休，这些变量仍像粘人的小鬼，不肯撒手离去，白白浪费了宝贵的内存。

function outer() {
  let x = 1;

  function inner() {
    console.log(x);
  }

  return inner;
}

const fn = outer();

// 内存泄漏：即使 outer 函数已经执行完毕，变量 x 仍然被保存在内存中

事件处理程序引起的内存泄漏

事件处理程序就像保镖，当元素触发特定事件时，它们就会跳出来执行任务。但是，如果保镖对元素过于痴迷，即使元素已经寿终正寝，它们也会赖着不走，占据着内存空间，成为不速之客。

const element = document.getElementById('my-element');

element.addEventListener('click', function() {
  console.log(this);
});

// 内存泄漏：即使元素被移除，事件处理程序仍然会被保存在内存中

如何避免内存泄漏？

避免内存泄漏，我们可以用上几招妙计：

弱引用

弱引用就像含蓄的暗示，当外部变量不再被使用时，它会悄悄地溜走，不留一点痕迹。在 JavaScript 中，我们可以使用 WeakRef 对象来实现弱引用。

const element = document.getElementById('my-element');

const weakRef = new WeakRef(element);

element.addEventListener('click', function() {
  const element = weakRef.deref();
  if (element) {
    console.log(element);
  }
});

// 当元素被移除时，弱引用会被自动回收，事件处理程序也会被自动移除

箭头函数

箭头函数就像精简版的函数，它们不创建新的函数对象，因此不会导致内存泄漏。

function outer() {
  let x = 1;

  const inner = () => {
    console.log(x);
  };

  return inner;
}

const fn = outer();

// 没有内存泄漏：箭头函数 inner 不会创建新的函数对象

事件委托

事件委托就像一个中央指挥官，它负责协调元素的事件，减少了事件处理程序的数量，降低了内存泄漏的风险。

const parentElement = document.getElementById('parent-element');

parentElement.addEventListener('click', function(event) {
  const targetElement = event.target;

  // 根据 targetElement 的属性或类名来确定要执行的操作
});

// 事件委托可以减少事件处理程序的数量，从而减少内存泄漏的风险