Stack 和 Heap 在 JavaScript 中的区别？（Maximum call stack size exceeded）

在 JavaScript 中，Stack 和 Heap 是两个非常重要的概念。Stack 和 Heap 都是用来存储数据的，但它们具有不同的特性。

Stack

Stack 是一种先进后出（Last In First Out）的数据结构，它的大小是固定的。在 JavaScript 中，Stack 通常用于存储函数调用栈和变量。

当一个函数被调用时，它会被添加到 Stack 中，并且函数内部声明的变量也会被添加到 Stack 中。当函数返回时，它会从 Stack 中弹出，并且相应的变量也会被清除。

以下是一个简单的示例代码：

function foo() {
  let a = 1;
  let b = 2;
  return a + b;
}

foo();

在这个示例中，当 foo() 函数被调用时，它会被添加到 Stack 中。并且 a 和 b 变量也会被添加到 Stack 中。当函数返回时，它会从 Stack 中弹出，并且 a 和 b 变量也会被清除。

Heap

Heap 是一种动态分配内存的数据结构，它的大小是不固定的。在 JavaScript 中，Heap 通常用于存储对象和数组等复杂数据类型。

当我们创建一个对象或者数组时，它们会被存储在 Heap 中。由于 Heap 的大小是不固定的，因此我们可以动态地添加、删除和修改对象和数组中的元素。

以下是一个简单的示例代码：

let obj = {
  a: 1,
  b: 2
};

在这个示例中，当我们创建 obj 对象时，它会被存储在 Heap 中。我们可以随时添加、删除和修改 obj 对象中的属性和方法。

Maximum call stack size exceeded

在 JavaScript 中，当我们递归调用一个函数时，如果调用次数过多，就会导致 Stack 溢出，从而引发 "Maximum call stack size exceeded" 错误。

以下是一个简单的示例代码：

function foo() {
  foo();
}

foo();

在这个示例中，当我们调用 foo() 函数时，它会不断地递归调用自身，直到 Stack 溢出，从而引发 "Maximum call stack size exceeded" 错误。

为了避免这种错误的发生，我们应该尽量避免过度递归调用函数，并且合理地使用 Stack 和 Heap。

总结

Stack 和 Heap 是两个重要的概念，在 JavaScript 中有着广泛的应用。Stack 通常用于存储函数调用栈和变量，而 Heap 通常用于存储对象和数组等复杂数据类型。当我们递归调用一个函数时，如果调用次数过多，就会导致 Stack 溢出，从而引发 "Maximum call stack size exceeded" 错误。为了避免这种错误的发生，我们应该尽量避免过度递归调用函数，并且合理地使用 Stack 和 Heap。

示例代码：

-- -------------------- ---- -------
-- ----- -------- -------
-------- ----- -
  ------
-

------

-- ------ ----- -- ----- --- ----
-------- ------------ -
  -- -- -- -- -
    ------ --
  -
  ------ - - ----------- - ---
-

--------------------------

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30104