在前端开发中，我们常常听到“闭包”“内存泄漏”“引用类型”等术语，却很少深入思考它们背后的运行机制。JavaScript 作为一门动态弱类型语言，其内存管理方式与 C、Java 等静态强类型语言截然不同。它不提供直接的内存操作接口（如 malloc 或 free），而是由引擎自动分配与回收。这种“黑盒”设计虽降低了使用门槛，却也掩盖了程序执行的真实面貌。本文将从内存空间划分出发，结合调用栈、堆内存、执行上下文等核心概念，揭示 JavaScript 如何高效管理数据，并解释闭包为何能“记住”外部变量。
栈与堆：内存的两种角色
当一段 JavaScript 代码被加载到浏览器中，它首先从硬盘进入代码空间，随后在执行过程中动态分配内存。这些内存主要分为两类：栈内存（Stack） 和 堆内存（Heap） 。
function foo() {
var a = "极客时间";
var b = a;
var c = { name: "极客时间" };
var d = c;
}
foo();
在这段代码中，变量 a 和 b 是字符串，属于原始数据类型（如 number、string、boolean、undefined、null、symbol、bigint），它们的值直接存储在栈内存中。而 c 和 d 是对象，属于引用数据类型，其实际内容（即 { name: "极客时间" }）被分配在堆内存中，栈中仅保存指向该对象的内存地址（指针）。
栈内存的特点是空间小、连续、分配与释放极快，非常适合存放生命周期短、大小固定的简单值。而堆内存则容量大、结构松散、分配较慢，用于存储动态创建的对象。这种分工确保了程序在频繁切换执行上下文时仍能保持高效——因为栈顶指针的偏移成本远低于在堆中遍历复杂结构。
动态弱类型：灵活性与代价
JavaScript 被称为动态弱类型语言，意味着变量的类型在运行时才确定，且可随时改变：
var bar;
bar = 12; // number
bar = "极客时间"; // string
bar = true; // boolean
bar = { name: "极客邦" }; // object
每一次赋值，引擎都会重新判断 bar 的类型，并在栈中更新其值或地址。这种灵活性极大提升了开发效率，但也带来了性能开销：引擎必须在运行时进行类型检查和内存重分配。相比之下，C 或 Java 等静态语言在编译期就固定了变量类型和内存布局，执行效率更高，但缺乏动态性。
值得注意的是，typeof null 返回 "object" 是 JavaScript 历史遗留的 bug，源于早期实现中 null 的内部标签与对象相同。这提醒我们：即便在高级语言中，底层设计的痕迹依然存在。
引用 vs 值拷贝：理解对象行为
由于引用类型存储的是地址，多个变量可能指向同一堆对象，导致“共享状态”：
function foo() {
var a = { name: "极客时间" };
var b = a; // 引用拷贝，非值拷贝
a.name = "极客邦";
console.log(b.name); // "极客邦"
}
foo();
这里，a 和 b 在栈中各自保存一个指针，但都指向堆中同一个对象。因此，通过 a 修改属性，b 也会“看到”变化。而原始类型则是值拷贝：
var a = 1;
var b = a;
a = 2;
console.log(b); // 1
这种差异是理解 JavaScript 数据操作的关键。误将引用当作独立副本，常导致意料之外的副作用。
执行上下文与调用栈
每当函数被调用，JavaScript 引擎会为其创建一个执行上下文（Execution Context） ，并压入调用栈（Call Stack） 。该上下文包含：
- 变量环境（Variable Environment） ：存放
var声明的变量； - 词法环境（Lexical Environment） ：存放
let、const及函数声明； - this 绑定；
- outer 引用：指向外层作用域，构成作用域链。
function foo() {
var myName = "极客时间";
let test1 = 1;
const test2 = 2;
// ...
}
foo();
当 foo() 执行时，其上下文被推入栈顶。函数返回后，上下文出栈，栈中相关变量（如 myName、test1）随之销毁。这一过程快速且自动，无需开发者干预。
闭包：堆内存中的“记忆”
闭包是 JavaScript 最强大也最易误解的特性之一。它的本质是：内部函数引用了外部函数的变量，导致这些变量无法随外部函数上下文一同销毁，而被提升至堆内存中长期保留。
function foo() {
var myName = "极客时间";
let test1 = 1;
var innerBar = {
setName: function(newName) {
myName = newName;
},
getName: function() {
console.log(test1);
return myName;
}
};
return innerBar;
}
var bar = foo();
bar.setName("极客邦");
console.log(bar.getName()); // "极客邦"
在 foo 执行前，V8 引擎会进行词法扫描，发现 setName 和 getName 使用了外部变量 myName 和 test1。于是，在堆内存中创建一个名为 closure(foo) 的特殊对象，将这些自由变量“捕获”并存储其中。即使 foo 执行完毕、其栈上下文被弹出，innerBar 中的两个方法仍可通过作用域链访问 closure(foo) 中的数据。
这解释了为何闭包能“记住”外部状态：被引用的变量并未消失，而是从栈迁移到了堆。这种机制使得回调函数、模块模式、私有变量等高级模式成为可能。
内存回收：自动但需警惕
JavaScript 的垃圾回收（GC）基于引用计数和标记-清除算法。栈内存随上下文销毁自动清理；堆内存中的对象，若不再被任何变量引用，则被标记为垃圾，等待回收。
然而，闭包若使用不当，会导致内存泄漏。例如：
function createLeak() {
const largeData = new Array(1000000).fill('*');
return function() {
console.log('I hold reference!');
};
}
const leaky = createLeak(); // largeData 无法被回收
尽管返回的函数未显式使用 largeData，但因处于同一作用域，整个 closure(createLeak) 被保留，largeData 也随之滞留内存。因此，开发者需注意及时解除不必要的引用。
总结
JavaScript 的内存机制是一套精巧的平衡系统：栈负责快速执行，堆承载复杂数据，闭包通过堆内存实现状态持久化。理解栈与堆的分工、引用与值的区别、以及闭包如何影响内存生命周期，不仅能写出更高效的代码，也能在排查性能问题时直击根源。
虽然我们无需像 C++ 那样手动管理内存，但“看不见”不等于“不存在”。真正的高手，往往在享受高级语言便利的同时，始终对底层机制保持敬畏与好奇。毕竟，所有优雅的抽象，终将回归到内存与指针的朴素世界。
