前端基础进阶（一）：内存空间详细图解

文章最新内容已迁移至公众号 不知非攻，后续维护也在公众号里修正，欢迎关注。

var a = 20;
var b = 'abc';
var c = true;
var d = {
    m: 20 }

因为JavaScript具有自动垃圾回收机制，所以对于前端开发来说，内存空间并不是一个经常被提及的概念，很容易被大家忽视。特别是很多不是计算机专业的朋友在进入到前端之后，会对内存空间的认知比较模糊，甚至有些人干脆就是一无所知。

当然也包括我自己。

在很长一段时间里认为内存空间的概念在JS的学习中并不是那么重要。可当我回过头来重新整理JS基础时，发现由于对它的模糊认知，导致了许多知识理解得并不明白。比如最基本的引用数据类型和引用传递到底是怎么回事儿？浅复制与深复制有什么不同？闭包到底是什么？等等。

因此，想要对JS的理解更加深刻，就必须对内存空间有一个清晰的认知。

在学习内存空间之前，我们需要对三种数据结构有一个清晰的理解。他们分别是堆(heap)，栈(stack)与队列(queue)。

一、栈数据结构

与C/C++不同，JavaScript中并没有严格意义上区分栈内存与堆内存。因此我们可以简单粗暴的理解为JavaScript的所有数据都保存在堆内存中。但是在某些场景，我们仍然需要基于栈数据结构的思维来实现一些功能，比如JavaScript的执行上下文（关于执行上下文我会在下一篇文章中总结）。执行上下文的执行顺序借用了栈数据结构的存取方式(也就是后面我们会经常提到的函数调用栈)。因此理解栈数据结构的原理与特点十分重要。

要简单理解栈的存取方式，我们可以通过类比乒乓球盒子来分析。如下图左侧。