深入 JavaScript 内存机制：从栈与堆到闭包的底层原理

在前端开发中，我们经常听到"闭包"、"内存泄漏"或"栈溢出"这些术语。要真正理解这些概念，必须深入 JavaScript 的内存管理机制。作为一门动态弱类型语言 ，JavaScript 在运行时自动处理内存的分配与回收，这与 C/C++ 等需要手动 malloc/free 的语言形成了鲜明对比。

本文将结合 V8 引擎的机制，详细剖析 JavaScript 的内存结构、数据存储方式以及闭包在内存中的真实形态。

1. JavaScript 的语言特性与内存管理

在深入内存之前，我们需要明确 JavaScript 的语言定位：

动态语言：在运行过程中检查数据类型，变量在使用前无需确认类型。
弱类型语言：支持隐式类型转换。

这意味着同一个变量可以先后被赋值为不同类型的数据。

JavaScript 复制代码

var bar;
bar = 12;           // number
bar = "极客时间";    // string
bar = {name:"极客时间"}; // object

这种灵活性意味着 JS 引擎需要在运行时动态分配内存，而不能像静态语言那样在编译期确定内存大小。

2. 内存空间的三大支柱

在 JavaScript 的执行过程中，主要涉及三种内存空间：

代码空间 (Code Space) ：用于存放可执行代码（将代码从硬盘读取到内存中）。
栈内存 (Stack / Call Stack) ：JS 执行的主角，用于维护执行上下文的状态。
堆内存 (Heap) ：用于存放复杂的对象数据，"打辅助"的角色。

2.1 栈内存 (Stack)

栈内存主要用于存放执行上下文 和简单数据类型。它的特点是：

效率高：栈顶指针切换非常快。
空间小且连续：为了保证上下文切换的效率，栈空间通常是固定且连续的。
存储内容：原始数据类型（String, Number, Boolean, Null, Undefined, Symbol 等）直接存储在栈中。

示例：简单类型的赋值

当我们将一个变量赋值给另一个变量时，如果是简单类型，栈内存中会直接进行值的拷贝。

JavaScript 复制代码

function foo() {
    var a = 1; 
    var b = a; // 拷贝值
    a = 2;
    console.log(a, b); // 输出: 2 1
}

2.2 堆内存 (Heap)

如果所有数据都存放在栈中，栈的空间会迅速膨胀，导致上下文切换变慢，进而拖慢程序执行效率。因此，复杂数据类型（Object, Array, Function 等）存放在堆内存中。

特点：空间大，数据不连续，分配和回收较耗时。
存储方式 ：对象实体存放在堆中，而栈中只保留该对象的引用地址。

示例：引用类型的赋值

对于复杂类型，变量赋值实际上是引用地址的拷贝。

JavaScript 复制代码

function foo() {
    var a = {name:"极客时间"} // 引用地址存放在栈，实体在堆
    var b = a; // 拷贝引用地址
    a.name = "极客邦";
    console.log(a, b); // 输出: {name:"极客邦"} {name:"极客邦"}
}

3. 深入闭包：内存视角的解析

闭包（Closure）是 JavaScript 中最迷人也最易混淆的概念。从内存机制的角度来看，闭包的本质是堆内存中专门开辟的存储空间。

3.1 闭包的形成过程

让我们看一段典型的闭包代码：

JavaScript 复制代码

// 代码来源: 6.html
function foo() {
    var myName = "极客时间"
    let test1 = 1
    const test2 = 2
    var innerBar = {
        setName: function (newName) {
            myName = newName
        },
        getName: function () {
            console.log(test1)
            return myName
        }
    }
    return innerBar
}
var bar = foo()

3.2 预扫描与堆分配

在 foo 函数执行前，编译阶段会创建一个空的执行上下文。此时，JS 引擎会进行一次快速的词法扫描：

引擎发现内部函数（setName, getName）引用了外部函数的变量（myName, test1）。
引擎判断这是一个闭包，于是在堆空间 中创建一个名为 closure(foo) 的对象。
被引用的自由变量（myName, test1）会被存储到这个堆空间对象中，而不是仅仅停留在栈上。
foo 函数的执行上下文中，会保存指向这个堆内存 closure(foo) 的引用地址。

3.3 执行与访问

当 foo 执行完毕并从调用栈弹出后，通常其内部变量会被销毁。但因为 closure(foo) 存在于堆内存 中，并且被返回的 innerBar 对象引用着，所以这些变量得以"幸存"。

getName 和 setName 执行时，它们不再去栈上找 myName，而是通过引用去堆内存的 closure(foo) 中访问。
这也是为什么闭包能保持状态，但滥用可能导致内存泄漏的原因。

4. 总结

JavaScript 的内存机制是为了平衡执行效率 与存储能力而设计的：

栈内存：负责处理执行上下文和简单类型，追求极致的切换速度。
堆内存：负责存储大数据对象和闭包数据，提供巨大的存储空间。
闭包：不仅是词法作用域的体现，更是通过在编译阶段预扫描，将栈上的变量"搬运"到堆中，从而实现了跨生命周期的数据访问。

理解了这些，再看 Object.prototype.toString.call(bar) 或者调试复杂的内存快照时，你就会明白底层到底发生了什么。