重学前端 第二章js(中)- js执行
Promise与setTimeout
浏览器或node首先会把代码传给JavaScript引擎,并要求它去执行;宿主环境遇到一些事件(例如setTimeout)会继续把某段代码传给JavaScript引擎。总结:JavaScript引擎常驻于内存中,等待宿主把代码或函数传递给他们执行。
宏观和微观任务
事件循环:等待的行为;
宏观任务的队列相当于事件循环;
每个宏观任务中又包含了一个微观任务队列;
promise永远会在队列尾部添加微观任务(js引擎内微任务);setTimeout等API会添加宏观任务。
微任务始终先于宏任务。
宿主发起的任务叫宏观任务,js引擎发起的任务叫微观任务,许多的微观任务组成宏观任务。
Promise
Promise思想:一个进行IO、等待或者其他异步操作的函数,不返回真实结果,返回一个“承诺”,函数的调用方在合适的时机,选择等待这个承诺兑现。(then方法的回调)
异步执行的顺序
1)分析多少个宏任务;
2)每个宏任务中,分析有多少个微任务;
3)根据调用次序,确定宏任务中微任务执行次序;
4)根据宏任务的触发规则和调用次序,确定宏任务的执行次序;
5)确定整个顺序;
async/await
async函数必定返回Promise,把所有返回Promise的函数都认定为异步函数。
使用:在function关键字之前加一个async,在其中使用await等待一个Promise函数。
注:async可以嵌套;
闭包和执行上下文
js执行中最粗粒度任务:传给引擎执行的代码段。js引擎发起的:宏观任务,宿主发起的:微观任务;
闭包
闭包:编译原理中指处理语法产生式的一个步骤;计算几何中指包裹平面点集的凸多边形;编程语言中表示一个函数;
javascript中跟闭包对应的概念是函数。
执行上下文
es3中:scope作用域又称作用域链;variable object 变量对象,用于存储变量的对象;this value:this值;
es5中:lexical environment 词法环境,获取变量时使用;variable environment 变量环境,声明变量时使用;this value this值;
es2018中:lexical environment 词法环境,获取变量或this值时使用;variable environment 变量环境,声明变量时使用;code evaluation state 恢复代码执行位置;Function 执行任务是函数时使用,表示正在被执行的代码;ScriptOrModule 执行的任务是脚本或者模块时使用,表示正在被执行的代码;Realm 使用的基础库和内置对象实例;Generator 仅生成器上下文有这个属性,表示当前生成器。
let
会使let产生作用域的语句:for、if、switch、try/catch/finally
Realm
Realm包含一组完整的内置对象,而且是复制关系。
JS执行函数
切换上下文最主要的场景是函数调用
函数分类
普通函数,用function关键字定义的函数;箭头函数,用=〉运算符定义的函数;在class中定义的函数;生成器函数,用function *定义的函数。class定义的类,实际上也是函数;异步函数,普通函数、箭头函数和生成器函数加上async关键字。
this
this是执行上下文中很重要的一个组成部分。同一个函数调用方式不同,得到的this值也不同。
1.普通函数的this值由“调用它所使用的引用”决定。获取函数的表达式,实际上返回的并非函数本身,而是一个Reference类型(由一个对象和一个属性值组成)
做一些算术运算(或其他运算时),Reference类型会被解引用,即获取真正的值(被引用的内容)来参与运算,而类似函数调用、delete等操作,都需要用到Reference类型中的对象。
2.箭头函数,不论用什么引用来调用它,都不影响它的this值。
3.类中函数:this值得到undefined,实例调用得到空类
4.生成器函数、异步生成器函数、异步普通函数和普通函数行为是一致的,异步箭头函数和箭头函数行为是一致的。
this的机制
js中,为函数规定了用来保存定义时上下文的私有属性;当一个函数执行时,会创建一条新的执行环境记录,记录的外层词法环境会被设置成函数的环境。
js中this的取值:1)lexical表示从上下文中找到this,对应了箭头函数;2)global:this为undefined时,取全局对象,对应了普通函数;3)strict:当严格模式时使用,this严格按照调用时传入的值,可能为null或undefined;
class设计为默认按strict模式执行;
函数创建新的执行上下文中的词法环境记录时,会根据[thisMode]来标记新纪录的[ThisBindingStatus]私有属性。代码执行遇到this时,会逐层检查当前词法环境记录中的[ThisBindingStatus],当找到有this的环境记录时获取this的值。
嵌套的箭头函数中的代码都指向外层this;
操作this的内置函数
Function.prototype.call 和Function.prototype.apply可以指定函数调用时传入的this值。
foo(a, b, c) {console.log(this)}
foo.call(‘111’, a, b, c) //String(“111”)
foo.apply(‘111’, [a, b, c]) //String(“111”)
foo.bind({}, 1, 2, 3)() // String(“111”)
JS语句
completion类型
Completion Record(描述异常、跳出等语句执行过程),包含3个字段:
1)type:表示完成的类型,有break continue return throw 和 normal几种类型;2)value:语句的返回值,如果语句没有,则是empty;3)target:语句的目标,通常是一个javascript标签;