剖析 JavaScript 内存模型：用图解轻松掌握！

作为程序员，我们日常工作离不开声明变量、初始化变量和给变量重新赋值。为了帮助大家深入理解 JavaScript 中的内存模型，本文将用通俗易懂的语言和生动的图解，带领大家揭开变量存储、分配和引用的奥秘。

变量、值和引用

在 JavaScript 中，变量是一个可以存储值的容器。它类似于一个标签，指向一个存储实际值的内存地址。例如：

let myNumber = 23;

在上面的示例中，我们声明了一个名为 myNumber 的变量，并将其初始化为 23。此时，在内存中，分配了一个地址，用来存储 myNumber 的值 23。换句话说，myNumber 并不是直接存储值 23，而是存储了一个引用，指向了值 23 所在的内存地址。

内存分配

当我们在 JavaScript 中声明一个变量时，会触发一个名为内存分配的过程。该过程为变量分配一个唯一的内存地址，用来存储它的值。此地址称为变量的引用。我们可以将它想象成一个邮政信箱，每个信箱都有一个唯一的地址，用于接收信件。

值类型和引用类型

JavaScript 中的值类型和引用类型是两个重要的概念。值类型直接存储实际值，而引用类型存储指向实际值的引用。以下是一些常见的 JavaScript 值类型：

• 数字（number）
• 字符串（string）
• 布尔值（boolean）

以下是一些常见的 JavaScript 引用类型：

• 数组（array）
• 对象（object）

理解值类型和引用类型非常重要，因为它会影响变量赋值和操作的行为。

变量赋值

当我们给一个变量赋值时，会发生以下情况：

• 值类型： 实际值被复制到新的内存地址，新变量获得对新地址的引用。
• 引用类型： 新变量获得对原始引用类型的引用，指向同一个内存地址。

变量重新赋值

当我们重新给一个变量赋值时，会发生以下情况：

• 值类型： 变量的引用更新为指向新值的内存地址。
• 引用类型： 变量的引用保持不变，仍然指向原始值。

图解 JavaScript 内存模型

为了进一步理解 JavaScript 内存模型，让我们用一些图解来直观展示变量声明、初始化、赋值和重新赋值的过程：

变量声明：

+--------------------+
| myNumber           |
+--------------------+
| null               |
+--------------------+

此时，myNumber 已经声明，但尚未初始化。

变量初始化：

+--------------------+
| myNumber           |
+--------------------+
| 23                 |
+--------------------+

myNumber 已初始化为值 23，并在内存中分配了一个地址来存储该值。

值类型变量赋值：

+--------------------+
| myNumber           |
+--------------------+
| 23                 |
+--------------------+

+--------------------+
| anotherNumber      |
+--------------------+
| 23                 |
+--------------------+

将 myNumber 赋值给另一个变量 anotherNumber 时，另一个内存地址被分配，并存储值 23。

引用类型变量赋值：

+--------------------+
| myObject           |
+--------------------+
| { name: "John" }   |
+--------------------+

+--------------------+
| anotherObject      |
+--------------------+
| { name: "John" }   |
+--------------------+

将 myObject 赋值给 anotherObject 时，这两个变量都指向同一个内存地址，指向对象 { name: "John" }。

引用类型变量重新赋值：

+--------------------+
| myObject           |
+--------------------+
| { name: "John" }   |
+--------------------+

+--------------------+
| anotherObject      |
+--------------------+
| { name: "Jane" }   |
+--------------------+

给 anotherObject 重新赋值为一个新对象 { name: "Jane" } 时，anotherObject 的引用指向了新的内存地址，而 myObject 的引用仍然指向原始对象 { name: "John" }。

总结

理解 JavaScript 内存模型对于掌握编程语言的基本原理至关重要。通过本文中深入浅出的讲解和直观的图解，希望能够帮助大家轻松掌握变量存储、分配和引用的概念。下次在编写 JavaScript 代码时，请时刻牢记这些基础知识，这将使你成为一名更自信、更熟练的开发者。