JavaScript中的变量在内存中的具体存储形式

一、三种数据结构

javascript中的变量类型分为：基本类型和引用类型

• 基本类型是保存在栈内存中的简单数据段，它们的值都有固定的大小，保存在栈空间，通过按值访问
• 引用类型是保存在堆内存中的对象，值大小不固定，栈内存中存放的该对象的访问地址指向堆内存中的对象，JavaScript不允许直接访问堆内存中的位置，因此操作对象时，实际操作对象的引用

1.栈内存

在javacsript中没有严格意义上区分栈内存和堆内存，可以简单的理解为js中的数据都保存在栈内存中,通过下面的图理解栈内存 的存取方式：

可以看到，越在上面的球一定是余额后面放进去的，所以总是最先被使用，想使用最下面的球就要将上面的球取出来。这就是栈内存的特点： 先进后出， 后进先出。

2. 堆内存

堆 是一种树形结构
它的存取就像在书架上的书一样，我们只需要确定的知道我们需要的书叫什么名字，而不需要将书按照一定的顺序排列，好比在JSON格式的数据中，我们存储的key-value是可以无序的，因为顺序的不同并不影响我们的使用，我们只需要关心书的名字。

3. 队列

队列是一种先进先出（FIFO）的数据结构。正如排队过安检一样，排在队伍前面的人一定是最先过检的人。

二、变量对象与数据类型

我们都知道当代码执行产生执行环境（执行上下文）之后，会产生与之对应的变量对象和作用域链
这里的变量对象就存放着执行上下文中定义的变量和函数声明。

三、代码图解

	let a1 = 0; // 栈内存
	let a2 = "this is string" // 栈内存
	let a3 = null; // 栈内存
	let b = { x: 10 }; // 变量b存在于栈中(引用)，{ x: 10 }作为对象存在于堆中
	let c = [1, 2, 3]; // 变量c存在于栈中（引用），[1, 2, 3]作为对象存在于堆中

可以明显的看到，a1,a2,a3都是基本数据类型，都在栈内保存这他们的数据段，按值访问，而对于b和c这两个对象，仅仅是在栈中存放着各自对象的地址，用来引用存放在堆内存的实际对象，按引用的方式访问

当我们要访问堆内存中的引用数据类型时

• 从栈中获取该对象的地址引用
• 再从堆内存中取得我们需要的数据

四、发生复制行为案例

1.基本类型的复制行为

	let a = 20;
	let b = a;
	b = 30;
	console.log(a); // 20

在栈内存中的数据发生复制行为时，系统会自动为新的变量分配一个新值，最后这些变量都是相互独立互不影响的

2.引用类型的复制行为

	let a = { x: 10, y: 20 }
	let b = a;
	b.x = 5;
	console.log(a.x); // 5

• 引用类型的复制，同样为新的变量b分配一个新的值，保存在栈内存中，不同的是，这个值仅仅是引用类型的一个地址指针
• 他们两个指向同一个值，也就是地址指针相同，在堆内存中访问到的具体对象实际上是同一个
• 因此改变b.x时，a.x也发生了变化，这就是引用类型的特性
  

栈堆对比

参考文章;https://www.cnblogs.com/angel648/p/11090504.html