数据类型之间的区别（堆内存Heap VS 栈内存Stack）

在了解数据类型之间的区别以前咱们首先要了解计算机的运行机制。

1、webkit底层运行机制

底层渲染过程

• 一、在浏览器中打开页面，浏览器引擎会渲染相关的代码（包含JS代码），换句话说，会把代码自上而下执行
• 二、浏览器想要执行代码，会提供一个供代码执行的环境，咱们把这个环境叫作ECStack（Execution Context Stack 执行环境栈）=> 栈内存 Stack（栈内存做用：供代码自上而下执行）
• 三、最开始执行的是全局代码，因此会造成一个EC（GLOBAL）全局上下文，在栈内存中执行全局的代码
• 四、在全局的执行上下文中有一个VO（GLOBAL）全局变量对象，能够把接下来定义的变量和对应的值储存到这里面

内存的概念

• Stack 栈内存
  • 打个比方：内存条：4G/8G......
• Heap 堆内存
  • 打个比方：硬盘：500GB/1TB......

所谓堆栈内存，其实就是在计算机内存中分配出来的一块空间，用来执行和储存代码的

图例以下：

了解了浏览器的运行机制，接下来咱们在看基本数据类型和引用数据类型之间的关系

2、基本数据类型（值类型）

值类型因为结构相对简单，直接把建立的值存储到“栈内存”中便可，由此咱们能够总结一下栈内存的做用；

• 栈内存的做用
  • 一、供代码自上而下执行
  • 二、存储基本类型值
• 基本数据类型执行过程：
  • 一、建立一个值（基本类型值直接存储在栈内存中便可）；
  • 二、建立一个变量a ，把其储存到VO（GLOBAL）中；
  • 三、让建立的变量a 和建立的值12 关联在一块儿 => =赋值的操做
  • 这就是定义变量的三个步骤（明确顺序）顺序很重要，不能颠倒
• 例题：

  let a = 12;
  let b = a;
  b = 13;
  console.log(a);
  复制代码

  结合上面讲述的浏览器的底层机制简单分析一下此题：

3、引用数据类型（对象函数）

引用数据类型的结构相对复杂（是一个综合体，包含不少值），因此不能直接存储在栈内存中，须要

• 单独开辟空间来存储，这个空间就是“堆内存”，引用数据类型值都存储在单独开辟的“堆内存”中！

• 堆内存只有一个做用：

  • 存储引用类型值

• 引用数据类型中对象的执行过程：（不包含函数，函数涉及内容较多后续单独讲解）

  • 一、建立值
    • 开辟一个堆内存（Heap），每个堆内存都有一个16进制的地址
    • 把对象中的键值对分别存储到堆内存中
    • 把堆内存的地址放在栈内存中，用来供变量的引用
  • 二、建立一个变量
  • 三、让变量和以前建立堆内存的地址进行关联

• 例题：

  let n = {
      name: '芝麻'
  };
  let m = n;
  m.name = '金色';
  console.log(n.name);
  复制代码

综上所述，简单一句话归纳：

• 基本数据类型是按值操做，值存储在栈内存中；
• 引用数据类型是按照堆内存的地址来操做；

思惟导图