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

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

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

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

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

javascript 内存消耗 js 跟踪 js内存地址_堆内存


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

二、变量声明的过程

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始终指向相同的堆内存,数据也发生了改变

javascript 内存消耗 js 跟踪 js内存地址_javascript_02

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

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

javascript 内存消耗 js 跟踪 js内存地址_开发语言_03