认识达内从这里开始

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

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

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

一、栈数据结构

与C/C++不同，JavaScript中并没有严格意义上区分栈内存与堆内存。

但是在某些场景，我们仍然需要基于栈数据结构的思维来实现一些功能，比如 JavaScript 的执行上下文（关于执行上下文我会在下一篇文章中总结）。执行上下文的执行顺序借用了栈数据结构的存取方式(也就是后面我们会经常提到的函数调用栈)。因此理解栈数据结构的原理与特点十分重要。

二、堆数据结构

堆数据结构是一种树状结构。它的存取数据的方式，则与书架与书非常相似。

书虽然也整齐的存放在书架上，但是我们只要知道书的名字，就可以很方便的取出我们想要的书，而不用像从乒乓球盒子里取乒乓一样，非得将上面的所有乒乓球拿出来才能取到中间的某一个乒乓球。好比在JSON格式的数据中，我们存储的key-value是可以无序的，因为顺序的不同并不影响我们的使用，我们只需要关心书的名字。

三、队列

在JavaScript中，理解队列数据结构的目的主要是为了清晰的明白事件循环（Event Loop）的机制到底是怎么回事。在后续的章节中我会详细分析事件循环机制。

队列是一种先进先出（FIFO）的数据结构。正如排队过安检一样，排在队伍前面的人一定是最先过检的人。用以下的图示可以清楚的理解队列的原理。

四、变量对象与基础数据类型

JavaScript的执行上下文生成之后，会创建一个叫做变量对象的特殊对象（具体会在下一篇文章与执行上下文一起总结），JavaScript的基础数据类型往往都会保存在变量对象中。

基础数据类型都是一些简单的数据段，JavaScript中有5种基础数据类型，分别是Undefined、Null、Boolean、Number、String。基础数据类型都是按值访问，我们可以直接操作保存在变量中的实际值。

五、引用数据类型与堆内存

与其他语言不同，JS的引用数据类型，比如数组Array，它们值的大小是不固定的。引用数据类型的值是保存在堆内存中的对象。JavaScript不允许直接访问堆内存中的数据，因此我们不能直接操作对象的堆内存空间。在操作对象时，实际上是在操作对象的引用而不是实际的对象。因此，引用类型的值都是按引用访问的。这里的引用，我们可以理解为保存在变量对象中的一个地址，该地址与堆内存的实际值相关联。

当我们要访问堆内存中的引用数据类型时，实际上我们首先是从变量对象中获取了该对象的地址引用（或者地址指针），然后再从堆内存中取得我们需要的数据。

理解了JS的内存空间，我们就可以借助内存空间的特性来验证一下引用类型的一些特点。

六、内存空间管理

因为JavaScript具有自动垃圾收集机制，所以我们在开发时好像不用关心内存的使用问题，内存的分配与回收都完全实现了自动管理。但是根据以往的开发经验，了解内存机制有助于自己清晰的认识到自己写的代码在执行过程中发生过什么，从而写出性能更加优秀的代码。

关心内存是一件非常重要的事情。

JavaScript的内存生命周期

1. 分配你所需要的内存

2. 使用分配到的内存（读、写）

3. 不需要时将其释放、归还

以上就是珠海达内给大家介绍的“珠海web前端基础进阶（一）：内存空间详细图解”，希望对你有所帮助。如果你也在考虑学习web前端，还可以申请试听几节web前端课程，亲身感受一下珠海达内的教学和氛围~