JS栈内存和堆内存

简单说明

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

代码与存储图

let s1010 = 12; // 栈内存
let s1009 = "test"; // 栈内存
let s1008 = null; // 栈内存
let s1007 = undefined; // 栈内存
let s1006 = true; // 栈内存
let arr1 = [1, 2, 3]; // 变量arr1存在于栈中,[1, 2, 3]作为对象存在于堆中
let obj2 = {a: 1}; // 变量arr2存在于栈中,{a: 1}作为对象存在于堆中

说明:

  • 原始值,存在栈内存stack,并且不可改变值
  • 引用值,值指针存在栈内存 值存在堆内存

访问堆内存中的数据类型步骤:
(1)从栈中获取该对象的地址引用
(2)再从堆内存中取得我们需要的数据

基本类型赋值行为

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

引用类型赋值行为

let arr1 = [1, 2, 3];
let arr2 = arr1;
arr1.push(4);
console.log(arr1, arr2); // [1, 2, 3, 4]  [1, 2, 3, 4]

let obj = {a: 1};
let obj2 = obj;
obj2.a = 2;
console.log(obj.a); // 2

对比总结:

栈内存 堆内存
存储基础数据类型 存储引用数据类型
按值访问 按引用访问
存储的值大小固定 存储的值大小不定,可动态调整
由系统自动分配内存空间 由代码进行指定分配
空间小,运算效率高 空间大,运行效率相对较低
先进后出,后进先出 无序存储,可根据引用直接获取