js之堆栈内存，运行机制。

刺骨的言语ヽ痛彻心扉 2023-06-13 06:12 58阅读 0赞

### js的堆栈机制 ###

*   *   *   *  一、栈内存
             *  二、 堆内存
             *  三、 运行机制

#### 一、栈内存 ####

> 1.  从电脑内存中分配一块出来，用来执行代码的内存，Stack  
>     先创建变量，再做赋值操作
> 2.  分配一个主线程来自上而下执行。（js单线程，浏览器多线程）
> 3.  主要用来运行代码，和存储基本类型。

1、基本数据类型存储

> 1.  **变量存储空间**，**存创建的变量**
> 2.  值存储空间，存**基本数据类型**的值
> 3.  一个值存储空间可以对应**多个**变量，一个变量只能对应**一个**值存储空间。

2、说明  
栈内存：是一个执行代码的一个空间，这个调用栈只有一个，并且大小固定，按照一定的排列规则自上而下，顺序执行。  
3、堆栈溢出  
溢出：因为栈内存空间有限，当你执行一些递归操作没有阻断或者释放的时候，反复调用，栈内存执行序列就会排不下了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjkwNTQ3_size_16_color_FFFFFF_t_70]

#### 二、 堆内存 ####

> 1.  从内存中有拿出来一块，用来存引用数据类型。Heap，一个16进制的地址。
> 2.  按照键、值分别存放，并关联起来。

引用数据类型存储

> 1.  堆内存不是有个**地址**么，放到**栈内存**的值存储空间，并和变量关联

上题  
![堆栈][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjkwNTQ3_size_16_color_FFFFFF_t_70 1]

#### 三、 运行机制 ####

> 1.  js单线程的，通过轮询来执行，一次循环，会有不同的队列等待Tasks，也有着不同的优先级。
> 2.  个人理解，主程里面分宏任务，微任务，一个轮询task的末尾执行微任务，然后响应待执行的异步任务对列。
> 3.  这使得某种情况下，你的setTimout，和setInterval，可能不是在预想的时候执行。

1.  js执行机制，Event Loop (事件循环)

*  同步和异步任务分别进入不同的执行"场所"，同步的进入主线程，异步的进入Event Table并·注册函数。
 *  当指定的事情完成时，Event Table会将这个函数移入Event Queue。
 *  主线程内的任务执行完毕为空，会去Event Queue读取对应的函数，进入主线程执行。  
    上述过程会不断重复，也就是常说的Event Loop(事件循环)。
 *  js引擎存在monitoring process进程，会持续不断的检查主线程执行栈是否为空，一旦为空，就会去Event Queue那里检查是否有等待被调用的函数。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjkwNTQ3_size_16_color_FFFFFF_t_70 2][]

1.  宏任务，微任务

> 宏任务：script,setInterval,setTimeout，一些浏览器api  
> 微任务：Promise，process.nextTick，js自身api，或者node,环境。  
> 不同环境执行机制有差异，不同任务进入不同Event Queue队列。  
> 当主程结束，先执行准备好微任务，然后再执行准备好的宏任务，一个轮询结束。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjkwNTQ3_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191228114022756.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjkwNTQ3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjkwNTQ3_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191114170234989.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjkwNTQ3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjkwNTQ3_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191228143309121.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjkwNTQ3,size_16,color_FFFFFF,t_70