web前端高级JavaScript - 数据类型区别和堆栈内存处理

雨点打透心脏的1/2处 2022-12-18 00:57 129阅读 0赞

## 栈内存（stack） & 堆内存（Heap） ##

> 本节将根据几道题来讲述：js代码在浏览器中运行的底层原理以及栈内存和堆内存

*  #### 涉及名词： ####

>  *  declare & define
>  *  ECStack（Execution Context Stack） 和 EC（Execution Context）/EC(G)全局执行上下文，用于执行代码
>  *  GO（Global Object）全局对象：它是一个堆内存，存储的都是浏览器内置的API属性方法，在浏览器端让window指向它
>  *  VO（Variable Object）(G)全局变量对象：全局上下文中用来**存储全局变量**的空间，它不是GO，但有时候某些情况下VO(G)中的东西会和GO中的东西有所关联

*  #### 接下来我们由几道题开始 ####

//------------1-------------------
    var a = 12;
    var b = a;
    b = 13;
    console.log(a)
    //-------------2------------------
    var a = { n: 12};
    var b = a;
    b['n'] = 13;
    console.log(a.n);
    //--------------3-----------------
    var a = { n: 12};
    var b = a;
    b = { n: 13};
    console.log(a.n);

> 上面几题并不难，相信大家都能得到正确答案，那么抛开题目本身和答案，这么简单的一段代码在浏览器中运行的底层原理是什么呢，接下来我们来逐个分析

*  #### 第一题运行原理剖析（值类型） ####

> 1.  浏览器为了运行js代码：首先它会在计算机的内存（我们常说的内存条）中分配出一块内存，用来供代码执行，就是所谓的栈内存（Stack），专业一点的我们把它叫执行环境栈即ECStack（Execution Context Stack）
> 2.  在总的执行环境栈（ECStack）中又分为多个不同的区域，为了区分是哪个区域（全局或函数等）下的代码执行，会产生一个“执行上下文”EC（Execution Context）。比如全局执行上下文，函数执行上下文等，每个执行上下文都是一块单独的不同的区域
> 3.  上面的代码中没有函数，所以在执行时肯定会先产生一个全局的执行上下文EC(G) =>Execution Context(global)，在全局代码的执行过程中会创建变量a和变量b，这些变量也得需要保存起来。这时就会产生一个叫变量对象的东西VO/VO(G)=>Variable Object (Global)，用来存储当前上下文声明的变量
> 4.  因为代码需要在栈中执行（第一步中的执行环境栈），所以会有个进栈执行的过程，然后执行完出栈
> 5.  进栈执行开始创建变量，创建变量会有如下几个步骤：var 变量 = 值
>     
>      *  先创建值，基本类型值直接存在栈内存中，引用类型值则都会开辟一块单独的内存空间（堆内存Heap）用来存储信息
>      *  声明变量并存放到当前上下文的变量对象中（VO/AO）
>      *  让变量和值关联到一起，也就是所谓的赋值操作，此操作叫做定义defined
> 6.  根据上一步原理，先创建一个值12，然后再创建一个变量a，最后让变量a与值12关联。接着创建b变量，因为b指向的是变量a，所以变量b也会与12关联。再继续往下执行，又创建一个值13然后让b重新与13关联，最后得到：a依然与12关联，而b则与新值13关联
> 7.  输出a的结果12

*一图解真相*  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpeGlhb3Nlbmxpbg_size_16_color_FFFFFF_t_70_pic_center]

*  #### 第二题原理剖析（引用类型） ####

> 前4步与第一题相同
> 
>  *  从第5步开始，因为涉及到引用类型，所以这里会重新开辟一块单独的内存（堆内存），用来存储对象信息。堆内存的创建过程：
> 
> 1.  在计算机内存中分配一个单独的内存（堆内存）
> 2.  生成一个16进制的地址
> 3.  把对象中的键值对分别存储到堆内存中
> 4.  把堆内存的地址放置到栈内存中，供变量使用
> 5.  变量与堆内存地址关联
> 
>  *  第6步中先开辟一块堆内存，存储对象信息\{n:12\}，然后让变量a与堆内存的地址关联。执行var b = a;因为b指向的是a变量，所以b也会与堆内存的地址关联。接着b\[‘n’\] = 13; 通过对象成员访问的方式将堆内存中的成员n的值改为13（因为b也是指向的这个堆）
>  *  最后a.n的值也变为13，因为a和b都是同一个堆内存地址，指向的都是同一个堆。

*一图解真相*  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpeGlhb3Nlbmxpbg_size_16_color_FFFFFF_t_70_pic_center 1]

*  #### 第三题原理剖析 ####

>  *  前5步同上一题
>  *  第6步：从var b = a;之前的代码都是一样的。不同的是当执行到b=\{n: 13\}时，发现是一个新的对象，这时就会重新开辟一个新的堆内存用来存储n: 13，同时生成一个新的内存地址，然后让b与新的堆内存地址关联，而a不变依然与原来的堆内存地址关联，所以b.n会变为13，而a.n依然是12  
>     最后输出12

*一图解真相*  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpeGlhb3Nlbmxpbg_size_16_color_FFFFFF_t_70_pic_center 2]

*  #### GO（global object） ####

> 在上面的讲述中我们已经学习了EC（G）、ECStack’、VO（G），那么还有个名称叫做GO（全局对象），注意这里是 **全局对象** ， 而不是 全局**变量**对象  
> GO是在加载页面时默认就生成的东西，而在这个对象中主要用来存储浏览器供JS调用的一些属性和方法，如setTimeOut、setInterval…  
> 它会在全局执行上下文的全局变量对象（VO（G））中默认创建一个window变量，window指向GO，window代表的就是全局对象。

*  #### 思考题 ####

var a = { n: 1};
    var b = a;
    a.x = a = { n: 2};
    console.log(a.x);
    console.log(b);
    ```

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpeGlhb3Nlbmxpbg_size_16_color_FFFFFF_t_70_pic_center]: /images/20221122/ad28ef4e2e60494f90dcd44370716346.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpeGlhb3Nlbmxpbg_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221122/643a06fb59f746d7b26d6812030863b9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpeGlhb3Nlbmxpbg_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221122/b90b2e1d95554253b86de598a5208c76.png