掌握 JavaScript 内存：堆栈和堆初学者指南-js教程-PHP中文网

Mastering JavaScript Memory: A Beginner’s Guide to Stack and Heap

JavaScript 堆栈和堆内存解释：深入理解基元和非基元

在 JavaScript 世界中，有效地处理内存对于创建最佳应用程序至关重要。 JavaScript 使用两种类型的内存空间：栈和堆。在本文中，我们将介绍这些内存空间如何发挥作用，特别是在处理原始和非原始数据类型时。在本指南结束时，您将能够确定数据所在的位置以及它如何影响性能。

介绍

JavaScript 是一种内存管理语言，这意味着它抽象了内存分配和释放的复杂性。然而，了解内存的内部工作原理可以帮助开发人员编写高效的代码并避免与内存相关的问题。内存在两个主要区域进行管理：

Stack Memory：静态数据的内存空间。
堆内存：动态数据的内存空间。

您使用的数据类型（原始数据或非原始数据）也会影响其存储位置和方式。让我们详细探讨这些概念。

JavaScript 中的堆栈内存

什么是堆栈内存？

堆栈内存是一种线性数据结构，以“后进先出”（LIFO）顺序存储变量。它保存固定大小的数据，并且访问速度比堆内存更快。栈主要用于原语和局部变量.

原语和堆栈

JavaScript 基本类型（如数字、字符串、布尔值、未定义、null 和符号）存储在堆栈中，因为它们是固定大小的数据。这使得它们易于管理，因为 JavaScript 引擎知道它们占用了多少内存。

示例：基元如何存储在堆栈中

let a = 10; // Stored in stack
let b = a;  // Also stored in stack as a copy of 'a'

a = 20;     // Changing 'a' does not affect 'b'

console.log(a); // Outputs: 20
console.log(b); // Outputs: 10

登录后复制

在此示例中，a 和 b 是堆栈内存中的两个独立副本。更改一个不会影响另一个，因为它们存储为单独的实体。

为什么使用堆栈？

堆栈对于短期、固定大小的数据非常有效。它组织有序，访问原始数据速度更快，非常适合存储不需要动态内存的简单变量。

JavaScript 中的堆内存

什么是堆内存？

堆内存是一个较大、结构较少的内存空间，用于存储需要动态增长或大小不固定的数据。它存储非原始数据类型，包括对象、数组和函数。堆内存允许创建复杂的数据结构，但访问速度比堆栈内存慢。

非基元和堆

JavaScript 中的非原始数据类型存储在堆中。这些类型包括对象和数组，它们本质上是动态的。当您将非基元分配给变量时，JavaScript 会创建对堆中位置的引用，而不是将数据本身存储在堆栈上。

示例：非基元如何存储在堆中

let a = 10; // Stored in stack
let b = a;  // Also stored in stack as a copy of 'a'

a = 20;     // Changing 'a' does not affect 'b'

console.log(a); // Outputs: 20
console.log(b); // Outputs: 10

登录后复制

在这种情况下，obj1 和 obj2 都引用堆中的同一内存位置。更改一个会影响另一个，因为它们是对同一对象的引用。

为什么使用堆？

堆内存对于非原始数据类型至关重要，因为它允许灵活性和动态内存分配。这种灵活性对于复杂的数据结构（例如可以更改大小或保存各种属性的数组和对象）至关重要。

深入探讨：堆栈内存和堆内存之间的差异

Feature	Stack Memory	Heap Memory
Data Type	Primitives	Non-primitives (objects, arrays)
Structure	Fixed-size, LIFO	Dynamic, less structured
Speed	Fast	Slower due to dynamic nature
Memory Limit	Limited	Large, but prone to fragmentation
Memory Cleanup	Automatic (by scope)	Garbage collection required

垃圾收集和堆

JavaScript 的垃圾收集器会定期清除堆中未引用的对象以释放内存。此过程称为垃圾收集，有助于保持高效的内存使用。

使用基元与非基元：示例和场景

场景 1：复制基元

let a = 10; // Stored in stack
let b = a;  // Also stored in stack as a copy of 'a'

a = 20;     // Changing 'a' does not affect 'b'

console.log(a); // Outputs: 20
console.log(b); // Outputs: 10

登录后复制

在这种情况下，y 不会受到 x 更改的影响，因为它们单独存储在堆栈中。

场景 2：复制非基元（参考）

let obj1 = { name: "Alice" }; // Stored in heap
let obj2 = obj1;               // Both 'obj1' and 'obj2' point to the same location in heap

obj1.name = "Bob";             // Modifying obj1 will affect obj2

console.log(obj1.name); // Outputs: "Bob"
console.log(obj2.name); // Outputs: "Bob"

登录后复制

在这种情况下，array1 和 array2 都引用堆中的同一个数组。修改 array1 会影响 array2。

场景 3：克隆非基元以避免引用问题

为了防止引用相互影响，您可以创建对象的浅拷贝或深拷贝。

浅拷贝示例

let x = 5;
let y = x; // Creates a copy of 'x' in stack

x = 10;

console.log(x); // Outputs: 10
console.log(y); // Outputs: 5

登录后复制

深拷贝示例

对于深度克隆，尤其是嵌套对象，您可以使用 JSON.parse 和 JSON.stringify 或像 Lodash 这样的库。

let array1 = [1, 2, 3];
let array2 = array1; // Points to the same memory location in heap

array1.push(4);

console.log(array1); // Outputs: [1, 2, 3, 4]
console.log(array2); // Outputs: [1, 2, 3, 4]

登录后复制