JS栈内存和堆内存详解

• JS变量都存放在内存中，而内存给变量开辟了两块区域，分别为栈区域和堆区域
• 栈像个容器，容量小速度快
• 堆像个房间，容量较大

一、基本数据类型和引用数据类型存储方式

js中的数据类型可以分为基本类型和引用类型。
基本类型是存在栈内存中的，引用类型是存在堆内存中的，但是引用类型的引用还是存在栈内存中的。

var a = 10;
var b = "hello world";
var c = {
	name:"张三",
	age:30
}

这里声明了3个变量，在内存中的存放如下图：

可以看出引用类型在栈内存中，存放的是一个地址

二、变量声明的过程

var a = 10;
var c = {
	name:"张三",
	age:30
}

在变量声明的过程中，发生了三哥步骤：

1.创建一个值

• 基本数据类型的值直接存储在栈内存中
• 引用数据类型先开辟一个堆内存空间，把值存进去，最后生成地址放到栈内存中供变量关联使用

2.创建一个变量

根据声明时候的变量名来创建变量

3.让变量和值关联在一起

变量名和值之间的=号就是关联指向

三、堆内存和栈内存的案例

• 案例一

var a = 12;
var b = a;
b=13;
console.log(a);//12

这个很好理解，栈内存中变量a指向12，又声明变量b等于a
b的值也指向12，b=13,b的值发生改变，不在指向12，而是指向13
a的值没有发生改变，始终指向13

• 案例二

var a= {n:12};
var b = a;
b['n'] = 15;
console.log(a.n);//15

a的值是引用数据类型，开辟出一个堆内存
b的值也指向a相同的堆内存地址
b通过地址改变了堆内存中的数据
a始终指向相同的堆内存，数据也发生了改变

• 案例三

 var a= {m:12};
 var b = a;
 b = {m:18}
 console.log(a.m);//12

变量a开辟出栈内存，声明变量b指向a的内存地址
变量b开辟出新的内存，指向a的关联指向作废
变量a的值始终指向之前的地址