js变量存储位置

760 阅读2分钟

这是我参与8月更文挑战的第15天,活动详情查看:8月更文挑战

在js引擎中对变量的存储主要有两种位置,堆内存和栈内存,这两位分工合作,分别保管JS中的两种数据类型:基本数据类型和复杂数据类型

一、数据类型

要知道堆栈,首先我们先了解下ECMAScript数据类型,数据类型整体可分为两种基本数据类型 & 复杂数据类型

  • 基本类型:Number、String、Boolean、null、undefined、Symbol;
  • 复杂类型:Object(Object、Array、function、Date、RegExp)。

相信这两种数据类型大家都太常见了,开发中随便let一个变量就是两种类型之一,那么我们声明变量之后是如何进行存储的呢?

在js引擎中对变量的存储主要有两种位置,堆内存和栈内存,不同类型的数据存储方式不同,总结两句话如下:

  • 基本类型:基本类型值在内存中占据固定大小,保存在栈内存
  • 引用类型:引用类型的值是对象,保存在堆内存中,而栈内存存储的是对象的变量标识符以及对象在堆内存中的存储地址

上面两句话我将引入两张图来助大家理解

  • 基本数据类型存储方式

    let a = 1;
    let b = true;
    let c = null;
    

    当我声明三个基本数据类型的变量时,栈内存存储变量的方式类似下图所示保存在栈内存中,基本数据类型占用空间小、大小固定,通过值来访问。

    image-20210813214521711.png

  • 复杂数据类型存储方式

    let obj = {};
    let arr = [];
    let map = new Map();
    

    当我声明了以上三个复杂数据类型时,栈、堆内存存储变量的方式类似下图所示,在栈内存中存取的是数据实体的引用地址,这个应用地址能够从堆内存中找到对应的实体数据,解释器寻找复杂数据类型时,需要先获取栈中的地址,取得地址后,再从堆中获得实体数据

    image-20210815205530589.png

    这里的栈内存存储的是复制数据类型的引用地址,可以在堆内存中通过这个引用地址获取到对应的复杂数据类型