前端面试资料之大厂真题篇(四)

谈谈javascript中内存泄漏的几种情况？

资料来源：rss1.cn

JavaScript中的内存泄漏指的是程序运行过程中，已不再需要的内存未能及时释放，导致内存占用不断增加。内存泄漏会导致应用程序的性能下降，甚至使程序崩溃。以下是几种常见的内存泄漏情况及其解决方法：

1. 意外的全局变量

情况描述

当在函数内忘记使用 var、let 或 const 声明变量时，该变量会被意外地添加到全局对象上，从而导致内存泄漏。

示例代码

function myFunction() {
  myVar = "I'm a global variable"; // 应该使用 var、let 或 const 声明
}
myFunction();
console.log(window.myVar); // "I'm a global variable"

解决方法

始终使用 var、let 或 const 来声明变量。

2. 闭包中的引用

情况描述

闭包可以捕获外部函数的变量，如果这些变量被意外地保留在内存中，就会导致内存泄漏。

示例代码

function createClosure() {
  const largeArray = new Array(1000000).fill("large array");

  return function() {
    console.log(largeArray);
  };
}

const closure = createClosure();
// 大数组仍然在内存中，因为闭包引用了它

解决方法

确保在不再需要闭包时，显式地解除对外部变量的引用。

function createClosure() {
  const largeArray = new Array(1000000).fill("large array");

  return function() {
    console.log(largeArray);
  };
}

let closure = createClosure();
// 解除对闭包的引用
closure = null;

3. DOM引用

情况描述

如果一个JavaScript对象持有对DOM元素的引用，而该元素已从DOM树中移除，可能会导致内存泄漏，因为该元素无法被垃圾回收。

示例代码

const elements = [];
function createElement() {
  const div = document.createElement('div');
  document.body.appendChild(div);
  elements.push(div);
}

createElement();
document.body.removeChild(elements[0]);
// div 仍然被 elements 数组引用，无法被垃圾回收

解决方法

在移除DOM元素时，确保解除所有对该元素的引用。

const elements = [];
function createElement() {
  const div = document.createElement('div');
  document.body.appendChild(div);
  elements.push(div);
}

createElement();
document.body.removeChild(elements[0]);
elements[0] = null; // 解除引用

4. 事件监听器未解除

情况描述

在添加事件监听器时，如果不在适当的时候解除，可能会导致内存泄漏，因为事件监听器会保留对DOM元素的引用。

示例代码

const button = document.getElementById('myButton');

function handleClick() {
  console.log('Button clicked');
}

button.addEventListener('click', handleClick);
// 假设按钮被移除但监听器未解除
document.body.removeChild(button);

解决方法

在移除DOM元素之前，先解除其事件监听器。

const button = document.getElementById('myButton');

function handleClick() {
  console.log('Button clicked');
}

button.addEventListener('click', handleClick);

// 在移除元素前解除事件监听器
button.removeEventListener('click', handleClick);
document.body.removeChild(button);

5. 定时器和回调

情况描述

定时器（如 setInterval 和 setTimeout）和回调函数如果未能正确清除，可能会导致内存泄漏。

示例代码

function startTimer() {
  setInterval(() => {
    console.log('Timer running');
  }, 1000);
}

startTimer();
// 假设某个条件下，定时器应该停止，但未清除

解决方法

在不需要定时器或回调函数时，及时清除。

let timerId;

function startTimer() {
  timerId = setInterval(() => {
    console.log('Timer running');
  }, 1000);
}

function stopTimer() {
  clearInterval(timerId);
}

// 开始定时器
startTimer();
// 假设某个条件下停止定时器
stopTimer();

6. 闭包中的循环引用

情况描述

闭包和对象的相互引用可能导致循环引用，使得垃圾回收器无法正确回收内存。

示例代码

function createCircularReference() {
  const obj1 = {};
  const obj2 = { obj1 };
  obj1.obj2 = obj2;
}

createCircularReference();
// obj1 和 obj2 相互引用，无法被垃圾回收

解决方法

避免闭包和对象的循环引用，或者在不需要时显式解除引用。

function createCircularReference() {
  const obj1 = {};
  const obj2 = { obj1 };
  obj1.obj2 = obj2;
  
  // 在适当的时候解除循环引用
  obj1.obj2 = null;
  obj2.obj1 = null;
}

createCircularReference();

总结

• 意外的全局变量：始终使用 var、let 或 const 声明变量。
• 闭包中的引用：在不再需要闭包时，显式解除对外部变量的引用。
• DOM引用：移除DOM元素时，解除所有对该元素的引用。
• 事件监听器未解除：在移除DOM元素之前，先解除其事件监听器。
• 定时器和回调：在不需要定时器或回调函数时，及时清除。
• 闭包中的循环引用：避免闭包和对象的循环引用，或在适当时解除引用。

通过遵循这些方法，可以有效地防止JavaScript中的内存泄漏问题。