JS 之作用域和闭包：堆栈溢出和内存泄漏

2023-09-29 18:38:25

在 JavaScript 的奇异世界中，作用域和闭包扮演着至关重要的角色，它们就像魔法师一样，控制着变量的可访问性，塑造着代码的行为。然而，在掌握它们的魅力时，我们也必须警惕堆栈溢出和内存泄漏这两个潛伏的陷阱，它们可以破坏我们程序的稳定性和性能。

堆栈溢出：当调用堆叠

当我们深入 JavaScript 的内部时，我们会遇到堆栈，它是一个数据结构，用于跟踪函数调用。每个函数调用都会在堆栈上创建自己的帧，其中包含该函数的局部变量。当函数返回时，其帧就会从堆栈中弹出。然而，如果我们不小心，可能会导致堆栈溢出，这会使我们的程序突然崩溃。

堆栈溢出通常由无限递归引起，即函数不断调用自身。例如：

function countdown(n) {
  console.log(n);
  countdown(n - 1); // 递归调用
}

countdown(1000000); // 堆栈溢出

这个示例中的 countdown 函数会继续递归调用自身，直到堆栈耗尽，导致堆栈溢出。为了避免这种情况，我们需要确保递归调用有明确的终止条件。

内存泄漏：当你握住它太紧时

内存泄漏是另一个 JavaScript 陷阱，它发生在不再需要的变量仍保留对内存中对象的引用时。这可能导致内存不断累积，最终导致程序性能下降甚至崩溃。

内存泄漏的常见原因之一是闭包。闭包是一种函数，它可以访问其创建时的局部变量。如果闭包长时间存在，即使其创建函数已返回，它仍会引用这些变量，从而导致内存泄漏。例如：

function createCounter() {
  let count = 0;
  return function() {
    count++;
    console.log(count);
  };
}

const counter = createCounter(); // 创建闭包

counter(); // 1
counter(); // 2

// count 变量仍由闭包引用，即使 createCounter 函数已返回