揭秘 JS 字符串内存分配，探索 Chrome Devtools 里的秘密
2023-11-30 07:25:25
如何在 JS 中分配内存？
在 JavaScript 中，字符串是基本数据类型之一，在程序执行过程中，字符串变量必须分配内存空间以存储其值。当遇到字符串字面量时，JavaScript 引擎会将其存储在字符串常量池中。字符串常量池是一个存储字符串字面量的特殊内存区域，当变量的值是字符串字面量时，该变量会在栈或堆上分配内存空间，并将该字符串字面量的引用存储在该内存空间中。例如，以下代码将创建一个指向字符串常量池中字符串 "Hello World" 的引用：
const str = "Hello World";
此时，str 变量在栈上分配了内存空间，该内存空间存储的是对字符串常量池中字符串 "Hello World" 的引用。如果将字符串值赋给变量，则该字符串值将在堆上分配内存空间，并将其引用存储在变量中。例如，以下代码将在堆上创建一个新的字符串对象，并将该字符串对象的引用存储在 str 变量中：
const str = new String("Hello World");
此时，str 变量在栈上分配了内存空间，该内存空间存储的是对堆上字符串对象的引用。
如何使用 Chrome Devtools 来查看字符串的内存分配情况？
Chrome Devtools 提供了多种工具来查看字符串的内存分配情况。其中，最简单的方法是使用 "Memory" 面板。在 "Memory" 面板上，您可以看到当前已分配的内存量以及各个对象占用的内存量。要查看字符串的内存分配情况，您可以使用以下步骤：
- 打开 Chrome Devtools。
- 点击 "Memory" 面板。
- 在 "Objects" 部分，找到 "String" 类型。
- 点击 "String" 类型旁边的箭头，以展开该类型下的所有字符串对象。
此时，您可以看到所有当前已分配的字符串对象及其占用的内存量。
字符串的内存分配过程示例
为了更直观地了解字符串的内存分配过程，我们可以使用以下示例代码：
const str1 = "Hello World";
const str2 = new String("Hello World");
在执行这段代码时，JavaScript 引擎会首先在字符串常量池中创建一个名为 "Hello World" 的字符串。然后，JavaScript 引擎会在栈上创建两个变量 str1 和 str2，并将这两个变量分别指向字符串常量池中的字符串 "Hello World" 和堆上创建的新字符串对象。此时，字符串 "Hello World" 在字符串常量池中只占用了一次内存空间，而 str1 和 str2 变量在栈上分别占用了一次内存空间。
现在，如果我们将 str1 和 str2 的值修改为其他字符串，则 JavaScript 引擎会分别在字符串常量池中创建一个新的字符串，并将 str1 和 str2 的值修改为指向这两个新字符串的引用。此时，字符串 "Hello World" 在字符串常量池中会占用两次内存空间，而 str1 和 str2 变量在栈上仍然分别占用了一次内存空间。
通过这个示例，我们可以看到 JavaScript 引擎是如何管理字符串的内存分配的。字符串常量池是一个存储字符串字面量的特殊内存区域，当变量的值是字符串字面量时，该变量会在栈或堆上分配内存空间，并将该字符串字面量的引用存储在该内存空间中。如果将字符串值赋给变量，则该字符串值将在堆上分配内存空间，并将其引用存储在变量中。
