重学前端学习笔记之JavaScript执行
（一）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是一个微任务）
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用一个栈来管理上下文，这个栈每一项又包含一个链表，当函数调用时，会入栈一个新的执行上下文，函数调用结束的时候，该执行上下文出栈。
（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()()();
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语句的分类如下：
（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实现了各种分值和跳出逻辑。
喜欢ヅ旅行
╰+攻爆jí腚メ
骑猪看日落
Myth丶恋晨
还没有评论，来说两句吧...