面试 4

面试 4
1、作用域

w3scholl中定义：作用域指的是您有权访问的变量集合。

作用域是指在程序中定义变量的区域，该位置决定了变量的生命周期。通俗理解，作用域就是变量与函数的可访问范围，即作用域控制着变量和函数的可见性和生命周期。

在 JavaScript 中有两种作用域类型：
- 局部作用域：在 JavaScript 函数中声明的变量，会成为函数的局部变量。（局部变量的作用域是局部的：只能在函数内部访问它们。）
- 全局作用域：函数之外声明的变量，会成为全局变量。
  JavaScript 拥有函数作用域：每个函数创建一个新的作用域。（全局变量的作用域是全局的：网页的所有脚本和函数都能够访问它。）
2、变量提升

https://juejin.cn/post/7007224479218663455
- JavaScript 引擎把变量的声明部分和函数的声明部分提升到代码开头的行为
- 变量被提升后，会给变量设置默认值为 undefined
- ES6的let和const不存在变量提升
3、事件循环机制EventLoop
- 宏任务：setTimeout、setInterval、setImmediate、UI Rending
- 微任务：Promise、async\await
微任务是由ES6语法规定的
宏任务是由浏览器规定的

视频讲解：
事件循环-EventLoop
事件循环-宏任务、微任务
 练习事件循环的网站

练习

上图依次打印：2 3 6 p2 p1 1 4 5

上图依次打印：script start -> async1 start -> async2 -> async1 end -> setTimeout
注：await 关键字，会等右边的方法执行完以后，再向下继续执行。

4、promise

特点：
①三种状态：pending（进行中）、resolved（已完成）、rejected（已失败）。只有异步操作的结果可以决定当前是哪一种状态，任何其他操作都不能改变这个状态。
②两种状态的转化：其一，从pending（进行中）到resolved（已完成）。其二，从pending（进行中）到rejected（已失败）。只有这两种形式的转变。
③Promise构造函数的原型对象上，有then()和catch()等方法，then()第一个参数接收resolved()传来的数据，catch()第一个参数接收rejected()传来的数据

作用：
①通常用来解决异步调用问题
②解决多层回调嵌套的方案
③提高代码可读性、更便于维护

Promise.all([]).then(() => {})：等待数组里所有的方法执行完以后，再执行then里的回调，只要有一个失败，就不会继续执行后续代码
```
const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values);
});
// Expected output: Array [3, 42, "foo"]

1
2
3
4
5
6
7
8
9
10
11
```
Promise.race([]).then(() => {})：以最先执行好的结果为准
```
const promise1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 500, 'one');
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'two');
});

Promise.race([promise1, promise2]).then((value) => {
  console.log(value);
  // Both resolve, but promise2 is faster
});
// Expected output: "two"
1
2
3
4
5
6
7
8
9
10
11
12
13
```
5、async、await

①async/await是ES8新特性
②async/await是写异步代码的新方式，以前的方法有回调函数和Promise
③async/await是基于Promise实现的，它不能用于普通的回调函数
④async/await与Promise一样，是非阻塞的
⑤async/await使得异步代码看起来像同步代码

 6、promis和async、await的区别

promise的出现解决了传统callback函数导致的地狱回调问题，但是他的语法导致它纵向发展形成了一个回调链，遇到复杂的业务场景显然是不美观的；
async、await看起来更加简洁，使得异步代码看起来像同步代码，只有await的代码执行完毕后才会执行下面的代码，与promise一样，也是非阻塞的；
async/await基于Promise实现，相当于Promise的升级版，不能用于普通的回调函数；

7、浏览器拿到html到现实在页面上，都做了什么

 8、如何异步读取script标签（async、defer）

在浏览器加载html过程中，html解析器运行在主线程，并且在遇到

1、作用域

2、变量提升

3、事件循环机制EventLoop

4、promise

5、async、await

6、promis和async、await的区别

7、浏览器拿到html到现实在页面上，都做了什么

8、如何异步读取script标签（async、defer）