1月10日

发布时间 2024-01-10 19:49:56作者: 20214073-付沛森

今天坐车回家

也是很冷,看了关于JAVAscript的知识

1. 堆栈

在JavaScript中,内存堆是内存分配的地方,调用栈是代码执行的地方。

原始类型的保存方式:在变量中保存的是值本身,所以原始类型也被称之为值类型。

对象类型的保存方式:在变量中保存的是对象的“引用”,所以对象类型也被称之为引用类型。
![[CleanShot 2024-01-02 at 14.56.33@2x.png]]
调用栈理解非常简单,当遇见一个方法时推入调用栈中,执行一个方法弹出栈,每一个方法称为一个调用帧。

2. 事件循环

理解了堆栈之后,接着来看一下与之相关的事件循环。

首先需要明确的是JavaScript是单线程语言,所有代码都执行在一个线程中,这通常会导致一个问题,当一个方法耗时过长,整个页面随之卡住,所以为了避免这种情况发生,JavaScript中存在事件循环的机制(并非JavaScript创造),来循环执行事件,堵塞的事件通过循环在后期再来判断是否执行完成,比如读取接口,后期再来看接口是否请求完成,请求完成之后再执行对应的回调函数(接口请求是浏览器提供的能力,不占用单线程)。

事件循环也就是将任务分为同步任务和异步任务,任务按照顺序进行执行。

事件循环中一个重要概念是宏任务和微任务,宏任务也就是线程中首先一轮执行的函数,微任务也就是宏任务里面的任务,类似进程和线程的关系,宏任务是进程,微任务是线程,下面来看一下三者之间的关系:

事件循环,其实循环的就是宏任务和微任务,当宏任务中有微任务时,执行里面的微任务。

下面来看一下在JavaScript中具体哪些函数是宏任务,哪些是微任务

  • macro-task(宏任务):包括整体代码script,setTimeout,setInterval
  • micro-task(微任务):Promise,process.nextTick(node代码, 类似vue中this.$nextTick)

具体来看一下执行流程:

    1. 整体script作为第一个宏任务进入主线程;
    2. 遇到setTimeout 、 setInterval,其回调函数被分发到宏任务事件队列中;
    3. 遇到process.nextTick(),其回调函数被分发到微任务事件队列中;
    4. 遇到Promisenew Promise函数体内容直接执行。then等回调部分被分发到微任务事件队列中;
    5. 微任务在宏任务执行后开始执行,比如微任务属于第一个宏任务,那么第一个宏任务执行完,就执行第一个宏任务里面的微任务,也就是说 script 里面要是包含微任务,那么是先于 setTimeout 等第二轮执行的宏任务的;
    6. 第一轮执行完成后,开始第二轮,也就是setTimeout 、 setInterval 回调函数里面的内容,属于第二轮宏任务,如果里面包含微任务,那么紧接着回调函数里面内容执行完之后开始执行;
    7. 如果微任务里面还包含微任务,那么是紧接着外层的微任务开始执行的。