面试 4

1、作用域

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

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

在 JavaScript 中有两种作用域类型:

  • 局部作用域:在 JavaScript 函数中声明的变量,会成为函数的局部变量。(局部变量的作用域是局部的:只能在函数内部访问它们。)
  • 全局作用域:函数之外声明的变量,会成为全局变量。
    JavaScript 拥有函数作用域:每个函数创建一个新的作用域。(全局变量的作用域是全局的:网页的所有脚本和函数都能够访问它。)

2、变量提升

https://juejin.cn/post/7007224479218663455

  • JavaScript 引擎把变量的声明部分和函数的声明部分提升到代码开头的行为
  • 变量被提升后,会给变量设置默认值为 undefined
  • ES6的let和const不存在变量提升
    面试 4_第1张图片

3、事件循环机制EventLoop

  • 宏任务:setTimeout、setInterval、setImmediate、UI Rending
  • 微任务:Promise、async\await
    面试 4_第2张图片
    面试 4_第3张图片

微任务是由ES6语法规定的
宏任务是由浏览器规定的
面试 4_第4张图片
视频讲解:
事件循环-EventLoop
事件循环-宏任务、微任务
练习事件循环的网站

练习
面试 4_第5张图片
上图依次打印:2 3 6 p2 p1 1 4 5
面试 4_第6张图片
上图依次打印: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"]

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"

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到现实在页面上,都做了什么


面试 4_第7张图片

8、如何异步读取script标签(async、defer)

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

你可能感兴趣的:(面试,职场和发展)