重学前端学习笔记之JavaScript执行

Myth丶恋晨 2022-02-28 01:48 343阅读 0赞

（一）JavaScript中的事件循环

1、JavaScript引擎存在于浏览器或者node环境中，它们拿到一段JS代码，就会传递给JavaScript引擎，让他们执行。

2、因为宿主环境以及各种API的变化，所以JS代码不是一次执行就可以完成的，而是不断会有js代码需要执行，因此js引擎会长蛀于内存，等待js代码，然后执行它

3、宿主环境发起的任务称为宏任务，js引擎发起的称为微观任务

4、事件循环

事件循环就是js引擎等待宿主环境分配宏观任务的等待行为。

它的实现就是在底层的代码中，大概像下面这样的伪代码

while (true)\{

r = wait();

execute(r);

此外需要注意的是，事件循环是一个独立线程，它主要的任务就是反复的等待-执行，而这个执行的过程，就是一个宏任务。

所以，可以这么理解，**宏任务的队列就相当于事件循环**

此外，在宏观任务里面，js还会产生异步代码，js必须要保证这些异步代码在一个宏任务中完成，因此，每个宏任务又包括一个微任务队列。（setTimeOut是一个宏任务，promise是一个微任务）

![16f70a9a51a65d5302166b0d78414d65.jpg][]

6、promise

promise是js提供的一种标准的异步管理方式管理方式，在进行IO、等待或者其他异步操作的函数，不返回结果，而是返回一个promise，函数的调用可以在合适的时机中选择等待完成这个promise（then）。

function sleep(duration) \{

return new Promise((resolve, reject)=>\{

setTimeout(resolve,duration);

\})

sleep(1000).then(()=>\{console.log("finished")\});

分析异步执行的顺序

*  首先分析有多少个宏任务（由setTimeOut分隔）
 *  在每个宏任务中，分析有多少个微任务
 *  根据调用顺序，确定宏任务中微任务的执行顺序
 *  根据宏任务的触发规则和调用顺序，确定宏任务的执行顺序
 *  确定整个顺序。

7、两个新特性async,await

这两个特性都是基于promise的，async返回的是一个promise

（1）如何定义一个async函数？

在函数function前面加一个async关键字

function sleep(duration) \{

return new Promise((resolve, reject)=>\{

setTimeout(resolve,duration);

\})

async function foo() \{

console.log("a");

await sleep(2000);

console.log("b");

用上面只是写一个红绿灯demo

function sleep(duration) \{

return new Promise((resolve, reject)=>\{

setTimeout(resolve,duration);

\})

async function changeColor(duration,color) \{

document.getElementById("traffic-lights").style.backgroundColor = color;

await sleep(duration);

async function trafficLights() \{

while (true)\{

await changeColor(3000,"green");

await changeColor(2000,"red");

await changeColor(1000,"yellow");

trafficLights();

（二）闭包和执行上下文

1、**闭包就是一个绑定了执行环境的函数，携带了执行环境。**其中环境部分是函数词法环境部分的组成，标识符列表是函数中用到的未声明变量，表达式部分是函数体**。**

2、执行上下文

js标准把一段代码（包括函数）执行所需的信息定义为执行上下文。

（1）在ES5中，执行上下文包以下部分

*  词法环境，获取变量时使用
 *  变量环境，声明变量时使用
 *  this值

（2）在ES2018中，执行上下文包括以下部分

*  词法环境，this值也绑定在词法环境中，获取变量或者获取this值时使用
 *  变量环境，声明变量时使用
 *  code evaluation state,代码执行状态，用于恢复代码执行位置
 *  Function执行的任务是函数时使用，表示正在执行的函数
 *  ScriptOrModule 执行任务是脚本或者模块时使用，表示正在执行的代码
 *  Realm 使用的基础库和内置对象实例
 *  Generator：生成器上下文拥有，表示当前的生成器

（3）当执行一段代码的时候，发生了什么事情？

var b = \{\};

let c = 1;

this.a = 2;

var声明变量到哪里？

声明的变量b表示哪个变量，它的原型是谁？  
let将c声明到哪里？this指向哪个对象

这些问题都是属于执行上下文范畴，每次执行代码都会关联到不同的执行上下文

首先回答第一个问题，var声明**作用域函数执行的作用域。也就是当前函数所在的环境。**

第二个问题，声明的变量b表示的是该作用域的b，它的原型是对应的值的引用类型，比如上面的b是一个对象，那么它的原型就是function对象，如果上面b是一个数字，那么它的原型就是Number，以此类推。

再说一下立即执行函数，通过创建一个函数，并且立即执行，来构造一个新的作用域，从而控制var的范围。常见的立即执行函数的写法：

(function () \{

console.log("a");

\}());

(function () \{

console.log("b")

\})();

void function () \{

console.log("c")

\}();

再来回答第三个问题，let声明的作用域是该块级作用域范围，this的值为当前执行上下文的词法环境中的thisModule。

Relam

Relam中包含一组完整的内置对象，而且是复制对象。

（三）函数，在函数的执行机制上面理解

1、函数调用的时候，执行上下文会进行切换

2、函数的分类

（1）普通函数，用function关键字定义的函数

（2）箭头函数，用=>运算符定义的函数

（3）class中定义的方法

class PEOPLE\{

say()\{

（4）生成器函数，用function\*定义的函数

function \* foo() \{

yield console.log("liang");

let liang = foo();

liang.next();

（5）类，用class定义的类实际上也是函数

class Foo\{

constructor()\{

（6）异步函数，在普通函数和生成器函数、箭头函数前面加async

async function foo() \{

console.log("a");

async function \* foo() \{

console.log("a");

3、this关键字的行为

（1）普通函数、带async的普通函数、生成器函数、带async的生成器函数

这类的函数是由**调用它所使用的引用**来决定this的值，调用的时候this的值会发生变化。

当我们获取函数的表达式（使用函数）时，返回的是Reference类型，这个类型由两个部分组成，**一个对象**和一个属性值，在使用这个函数的时候，此时this的值是这个对象，传入了执行函数的上下文。

function foo() \{

console.log(this);

foo();//window

当我们像下面这样将这个函数传给一个对象，然后调用该对象的函数，此时this的值会发生变化

function foo() \{

console.log(this);

let o = \{

foo:foo

\};

o.foo();//\{foo: ƒ\}指向的是o

（2）箭头函数、带async的箭头函数

包裹箭头函数的作用域，指向箭头函数执行上下文中的词法环境，无论怎么调用，this的值始终如一。

（3）class定义的函数

等于实例化后的对象，如果将class里面的方法赋给外面的变量，此时外面变量调用该方法的this值为undefined。

4、this关键字的机制

（1）**函数拥有一个保存定义该函数时上下文的私有属性\[\[Enviornment\]\]**

（2）当一个函数执行的时候，会创建一条新的执行环境记录，**记录的外层词法环境会被设置为该函数的\[\[Enviornment\]\]，也就是此时this的值会等于该****\[\[Enviornment\]\]**

（3）函数可以访问定义时词法环境，但不能访问执行时词法环境。

（4）js用一个栈来管理上下文，这个栈每一项又包含一个链表，当函数调用时，会入栈一个新的执行上下文，函数调用结束的时候，该执行上下文出栈。

![e8d8e96c983a832eb646d6c17ff3df31.jpg][]

（5）\[\[thisModel\]\]私有属性有三个取值

*  lexical，表示从上下文中找this，对应箭头函数
 *  global，当this的值为undefined的时候，取值为全局对象，对应普通函数
 *  strict，严格按调用时传入的值，可能null或者undefined。（非常有意思的是，方法的行为跟普通函数有差异，class 设计成了默认按 strict 模式）

（6）调用函数创建新的执行上下文中词法环境，会根据\[\[thisModel\]\]来标记新记录的\[\[ThisBindingStatus\]\]，代码执行遇到this的时候，会逐层检查当前词法环境记录中的\[\[ThisBindingStatus\]\]，直至找到值。

（7）嵌套的箭头函数的this都指向最外层的this。

如下面代码

var o = \{\};

o.foo = function foo() \{

console.log(this);

return ()=>\{

console.log(this);

return ()=>console.log(this);

o.foo()()();

![20190324001030274.png][]

5、操作this的内置函数（可以改变this值的函数）

apply,call,bind

（四）js的语句执行机制--Completion

1、js语句执行的完成状态--Completion Record，表示一个语句执行之后的结果，有三个字段。

*  \[\[type\]\]，表示完成的状态，取值有break continue return throw 和normal
 *  \[\[vaue\]\]语句的返回值，如果语句没有，则值为empty，一般只有表达式语句拥有。
 *  \[\[target\]\]表示语句的目标。通常是一个js语句标签。

2、那么在completion record类型下面，js控制语句执行的过程是怎样的？

js语句的分类如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70][]

（1）普通语句

普通语句执行时（有var会有预处理），从前到后顺序执行，执行后会得到\[\[type\]\]的值为**normal**的Completion Record，js引擎遇到这样的语句，会继续执行下一条语句，只有表达式语句会产生\[\[value\]\]。

（2）语句块

*  语句块就是用大括号\{\}括起来的一组语句，它是一种语句的符合结构，可以嵌套

*  如果一个语句块只含有\[\[type\]\]为normal的语句，那么这个语句块里面的语句顺序执行，整个语句块的\[\[type\]\]也为normal。
 *  如果一个语句块含有\[\[type\]\]为非normal的语句，那么整个语句块的\[\[type\]\]也非normal。

（3）控制语句

*  控制性语句带有if,switch等关键字，它们会对不同类型的Completion Record产生反应。
 *  对语句内部产生影响的有if,switch,while,for,try,对语句外部产生影响的有break,continue,return,throw，两者配合，控制代码执行顺序和逻辑
 *  即使try或者catch里面的语句执行完毕，如果有finally，也会执行finally里面的语句。

（4）带标签的语句

JavaScript语句是可以加标签的，如

firstStatement: var i = 1;

作用：与Completion Record中的target相对于，用于跳出多层循环。

outer: while(true) \{

inner: while(true) \{

break outer;

console.log("finished")

（5）因为js语句存在嵌套关系，所以执行过程实际上主要在一个树形结构上完成，树形结构上的每一个节点执行后产生Completion Record，根据语句的结构和Completion Record，js实现了各种分值和跳出逻辑。

[16f70a9a51a65d5302166b0d78414d65.jpg]: /images/20220228/73c64f8ec85c4f74be68d7a5f2298b5b.png
[e8d8e96c983a832eb646d6c17ff3df31.jpg]: /images/20220228/8e0940a36fd84dc98e4900f46be6e33c.png
[20190324001030274.png]: /images/20220228/069530e68efe4f7dae4085e86443ac59.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70]: /images/20220228/0a375cfcf29f415490f3257b997c07e5.png