前端高质量知识（1）-JS内存空间的详细说明

变量对象和堆内存

var a = 20;

var b ='abc';

var c = true;

var d = {m: 20}

由于JavaScript具有自动垃圾收集机制，因此内存空间并不是前端开发中经常提到的概念，并且每个人都容易忽略它. 尤其是，许多不是计算机人员的朋友进入前端后对内存空间的理解都不明确，甚至有些人根本一无所知.

我当然也包括自己. 长期以来，我认为内存空间的概念在JS学习中并不那么重要. 但是，当我回过头来重新整理JS的基础知识时，我发现由于对它们的模糊理解，所以我并不了解很多东西. 例如，最基本的参考数据类型和参考传递是什么？例如，浅拷贝和深拷贝有什么区别？也有闭包，原型等.

所以后来，我逐渐了解，如果您想对JS有更深入的了解，那么您必须对内存空间有一个清晰的了解.

一堆一堆

注意: 堆栈，也可以称为堆栈

与C / C ++不同，JavaScript中的堆栈内存和堆内存之间没有严格的区别. 因此，我们可以大致了解到JavaScript的所有数据都存储在堆内存中. 但是在某些情况下，我们仍然需要基于堆栈数据结构的思想进行处理，例如JavaScript的执行上下文（我将在下一篇文章中总结执行上下文）. 执行上下文在逻辑上实现堆栈. 因此，了解堆栈数据结构的原理和特点仍然非常重要.

为了简单地了解如何访问堆栈，我们可以使用乒乓球盒进行类比分析. 如下图左侧所示.

乒乓球盒与筹码类比

此乒乓球的存储方法与访问堆栈中数据的方式相同. 盒子顶部的乒乓球5必须放在最后，但可以先使用. 如果要在底层使用乒乓球1，则必须取出上面的四个乒乓球，并在盒子的顶部制作乒乓球1. 这是堆栈空间的后进先出特性. 该图详细显示了堆栈空间的存储原理.

数据的存储和存储方式与书架和书籍非常相似.

尽管这些书也整齐地存放在书架上，但是只要我们知道书名，我们就可以轻松地取出想要的书，而不用从乒乓球盒中拿出乒乓球. 取出所有乒乓球，在中间取一个乒乓球. 例如，在JSON格式的数据中，我们存储的键值可以是无序的，因为顺序上的差异不会影响我们的使用，我们只需要关心书名即可.

两个可变对象和基本数据类型

在生成JavaScript的执行上下文之后，将创建一个称为变量对象的特殊对象（详细信息将与执行上下文一起在下一篇文章中进行总结），并且JavaScript的基本数据类型通常存储在可变对象.

严格来说，变量对象也存储在堆内存中，但是由于变量对象的特殊功能，我们在理解变量时仍然需要将它们与堆内存区分开.

基本数据类型都是简单的数据段. JavaScript有5种基本数据类型，即: 未定义，空，布尔值，数字，字符串. 基本数据类型通过值访问，因为我们可以直接操纵存储在变量中的实际值.

三，参考数据类型和堆内存

与其他语言不同，JS的参考数据类型（例如数组）具有可变值. 引用数据类型的值是存储在堆内存中的对象. JavaScript不允许直接访问堆内存中的位置，因此我们无法直接操纵对象的堆内存空间. 当您操纵对象时，实际上是在操纵对对象的引用，而不是实际的对象. 因此，引用类型的值通过引用来访问. 此处的引用可以大致理解为存储在变量对象中的地址，该地址与堆内存的实际值相关联.

为了更好地理解变量对象和堆内存，我们可以结合以下示例和图表进行理解.

var a1 = 0; //变量对象

var a2 ='这是字符串'; //变量对象

var a3 = null; //变量对象

var b = {m: 20}; //变量b存在于变量对象中，{m: 20}作为对象存在于堆存储器中

var c = [1,2,3]; //变量c存在于变量对象中，[1、2、3]作为对象存在于堆存储器中

上面的示例插图

因此，当我们要访问堆内存中的引用数据类型时，实际上，我们首先从变量对象获取对象的地址引用（或地址指针），然后从堆获取所需的数据. 记忆.

了解JS的内存空间后，我们可以使用内存空间的特征来验证引用类型的某些特征.

在前端访谈中，我们经常遇到类似的问题

// demo01.js

var a = 20;

var b = a;

b = 30;

//此时a的值是什么？

// demo02.js

var m = {a: 10，b: 20}

var n = m;

n.a = 15;

//此时m.a的值是什么

当复制变量对象中的数据时，系统将自动为新变量分配一个新值. 在执行var b = a之后，尽管a和b的值都等于20，但它们实际上是独立的并且彼此独立. 具体如图所示. 因此，在修改b的值之后，a的值将保持不变.

Demo01插图

在demo02中，我们执行一个操作以通过var n = m复制引用类型. 引用类型的副本还将自动为新变量分配一个新值，并将其存储在变量对象中，但是区别在于此新值只是引用类型的地址指针. 当地址指针相同时，尽管它们彼此独立，但是在变量对象中访问的特定对象实际上是相同的. 如图所示.

所以当我改变n时，m也会改变. 这就是引用类型的特征.

Demo02插图

从内存的角度理解，感觉容易吗？此外，我们还可以以此为基础来逐步了解重要概念，例如JavaScript执行上下文，作用域链，闭包和原型链. 我将在以后的文章中慢慢总结其他内容，敬请期待.

内存空间管理

由于JavaScript具有自动垃圾收集机制，因此我们似乎不需要在开发过程中关注内存使用情况. 内存的分配和回收是完全自动化的. 但是，根据我自己的开发经验，了解内存机制可以帮助我清楚地了解在执行所编写的代码期间发生的情况，从而可以编写性能更高的代码. 因此，关心内存是非常重要的事情.

JavaScript内存生命周期

1. 分配所需的内存

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

3. 释放并在不需要时返回它

为便于理解，我们使用一个简单的示例来说明此循环.

var a = 20; //为内存中的数字变量分配空间

警报（a + 100）; //使用内存

var a = null; //使用后，释放内存空间

第一步和第二步都很好理解. 定义变量时，JavaScript完成内存分配. 释放内存空间的第三步是我们需要了解的一点.

JavaScript具有自动垃圾收集机制，那么这种自动垃圾收集机制的原理是什么？其实很简单，就是找出不再使用的值，然后释放它们所占用的内存. 垃圾收集器将在每个固定时间段执行一次释放操作.

在JavaScript中，最常用的算法是通过标记去除算法找出不再使用的对象，因此a = null实际上只是一个参考释放操作，因此a的原始对应值会丢失reference，在执行环境之外，将在下次垃圾回收器执行操作时找到并释放该值. 而且在适当的时候取消引用是获取页面更好性能的重要方法.

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/shoujiruanjian/article-299414-1.html