手撕JS八股文

一、事件循环
在了解事件循环之前先要了解什么是同步任务什么是异步任务。我们都知道js代码在执行的时候是按顺序执行，在上一行代码没执行完毕是不能去执行下一行代码的。这也就意味着js在无法同时做多件事情。而异步任务就是为了解决这一问题。

异步任务又分为宏任务和微任务。而事件循环指的就是宏任务和微任务的执行所产生的一个循环机制。

常见的宏任务有script（整体代码）、setTimeout、setInterval、setImmediate（nodejs独有）、requestAnimationFrame（浏览器独有）、IO、UIrender（浏览器独有）

常见的微任务有：process.nextTick(nodejs独有)、Promise.then()、Object.observe、MutationObserver

当一段js代码在执行的时候会维护宏任务和微任务两个队列。遇到了宏任务或者微任务就会将他压入对应的对列中。等当前代码执行完毕后就会将微任务队列里得任务拿出来执行。如果此过程中产生了新的微任务则又维护一个新的微任务队列，等当前微任务队列清空后再去执行新的微任务队列里得任务，当所有得微任务都执行完之后就会开始执行宏任务队列里得任务。如果此过程中产生了微任务则又会开始执行微任务，以此循环直到两个队列都被清空。这就是事件循环得全过程。ps：微任务会在dom渲染之前执行，因为js引擎线程和GUI线程互斥的原因，导致js在执行，就不会去渲染页面。
下面让我们看一道练习题来巩固一下知识

setTimeout(function () {
    console.log("setTimeout1");

    new Promise(function (resolve) {
        resolve();
    }).then(function () {
        new Promise(function (resolve) {
            resolve();
        }).then(function () {
            console.log("then4");
        });
        console.log("then2");
    });
});

new Promise(function (resolve) {
    console.log("promise1");
    resolve();
}).then(function () {
    console.log("then1");
});

setTimeout(function () {
    console.log("setTimeout2");
});

console.log(2);

new Promise(function (resolve) {
    resolve();
}).then(function () {
    console.log("then3");
});

首先代码遇到setTimeout 将他加入宏任务队列，然后执行道第一个promise 输出其中得同步代码 promise1
然后将.then加入微任务队列。
随后又遇到了setTimeout 将其加入宏任务队列
紧接着输出2
最后又是一个promise 而这个promise里没有同步代码所以直接将then加入微任务队列。
此时已经输出了promise1，2。
而当前得宏任务队列里有两个定时器微任务队列里有两个promise.then
现在开始执行微任务，先输出then1 紧接着输出then3.
当前微任务队列已经空了开始执行宏任务队列。
进入第一个定时器输出setTimeout1，紧接着又遇到了微任务，所以又开始执行微任务。
输出then2 而这个微任务里又有一个微任务所以接着执行他输出then4
微任务清空了接着去执行宏任务输出setTimeout2.

所以最终得输出顺序应该是
promise1，2，then1，then3，setTimeout1，then2，then4，setTimeout2

二、作用域，作用域链，执行上下文
作用域指的就是一个变量被定义得区域，他决定了如何查找这个变量以及变量可被访问的权限。
作用域分为全局作用域函数作用域块级作用域。
在es6之前js是没有块级作用域得所以除函数作用域外var声明得变量都会提升到全局，变成全局变量。es6引进了let和const两个关键字来声明变量。从而就有了块级作用域的概念。在一个花括号内使用let和const声明的变量只能在这个块内被访问，外部是无法访问的。const用来声明一个不可改变的常量

js采用的是静态作用域，也就是变量得作用域在他被定义得时候就已经决定了。而与之对应得动态作用域则是在哪儿被调用作用域就在哪儿。

执行上下文
当一个函数被调用得时候，js就会进行准备工作，这个准备工作指的就是创建执行上下文。
一个执行上下文包括变量对象（vo）作用域链 this
执行上下文也分为全局执行上下文和函数执行上下文。

js有一个专门维护执行上下文得栈全局执行上下文始终在栈得最底部每个函数被调用时他得执行上下文就会被压入栈中等他执行完毕后这个执行上下文又会被弹出。

变量对象包括函数得形参以及函数内部所声明得所有变量。当在函数中访问一个变量时 js会现在当前函数得执行上下文得变量对象中查找，如果没有找到则会去查找父级作用域得变量对象。一直到全局上下文得变量对象为止。这个查找得过程就是作用域链。

三、js垃圾回收机制
js大概有两种垃圾回收机制
1、标记清除
js引擎会给所有的对象打上一个标记，当这个对象被引用时就会把标记清除掉，最后再把所有还保留这标记的变量回收释放内存。这种方法会导致有很多内存碎片。
2、引用计数
采用计数的方式记录一个变量是否可以被回收，初始赋值的时候数值+1当变量被赋值给别人的时候数量+1 当给变量赋值的时候数量-1，如果变量的计数为0则说明没有人引用这个变量了。则可以回收此变量。直接给变量赋值null此变量就会被回收。

四、模块化相关
模块化有利于代码的提高代码复用性和可维护性，防止命名冲突以及全局污染。

js的模块化方案大致有以下几种：
1、AMD：异步加载模块，所有的模块代码都写在回调函数中，只有当模块加载完毕才会去执行回调函数里的代码，此模式适用于浏览器端
2、CMD：可异步也可同步的模块加载方案，他和AMD不同的是执行了require就会去加载模块，支持同步也支持异步，支持浏览器也支持node
3、UMD：AMD和CMD的整合
4、Commonjs：这是nodejs的模块化方案他的每个js都是一个模块，每个js中它提供了几个核心变量：exports、module.exports、require。前两个用来暴露出变量，最后一个用来引入。
-4.1、require的加载流程：首先被加载的内容分为 node核心模块，自定义模块，文件模块。像我们通过路劲引入的则是文件模块，而直接通过包名引入的话 commonjs首先会去查找是否是node自带的模块，如果不是则去node_modules里查找这个包，如果还没有则往父级的依赖文件夹里找直到根目录为止。
那commonjs是如何避免循环引用和重复加载的呢？
要搞清楚这个问题得直到module和Module这两个东西，上文说了每个js文件都是一个module，这个module身上不仅有导入导出的方法，还有一个loaded属性，表示这个模块是否被加载过。Module则是nodejs在运行的时候创建的一个保存所有模块值得变量，每个模块在被加载之前都会去Module身上查找是否有缓存，没有的话就会存下。

有了这两个东西之后commonjs就可以做到避免重复加载和循环引用的问题。

5、ESM：Es Module是JS的es6规范才提出的模块化方案，是一个真正属于js自己的模块化规范

他的诞生有很多优势：
借助 Es Module 的静态导入导出的优势，实现了 tree shaking。
Es Module 还可以 import() 懒加载方式实现代码分割。

Es Module 中用 export 用来导出模块，import 用来导入模块。但是 export 配合 import 会有很多种组合情况，接下来我们逐一分析一下。

ESM的导入导出都是静态的，import会自动提升到代码顶部，并且他的语法都不能写在函数作用域和块级作用域内，也不能写在条件判断内。

正因为这种静态的语法，所有他会在代码编译阶段就确定依赖关系，也是借助这个特性，可以做摇树优化。

因为import会提升到最顶部，所以esm的执行顺序是先子后父。

下面总结一下ESM和Commonjs：

Commonjs：

1、代码运行时加载
2、导出的是值得浅拷贝，值一旦输出，在模块内到处方法是无法修改已导出的值的
3、可以动态加载，对每个导出的值都有缓存，能有效解决循环引用的问题
4、加载的时候才执行

ESM

1、代码编译时加载
2、导出的值可以被模块内的方法修改，但不支持外界主动修改
3、写法灵活，可以单个导入导出混合导入导出
4、因为import会提升，所以esm的模块会提前加载并执行