当前位置: 首页 > 科技观察

前端100题-通俗易懂的JavaScript执行上下文

时间:2023-03-16 13:36:16 科技观察

JavaScript标准将执行一段代码(包括函数)所需的所有信息定义为“执行上下文”(可以理解为当前的执行环境代码,同一个函数在不同的环境中执行,会因为访问的数据不同而产生不同的结果),这是执行的基础设施。执行上下文包括很多内容,下面从类型、内容、生命周期、执行过程、结论等方面进行说明。10.1类型执行上下文主要分为三类:全局执行上下文、函数执行上下文和eval函数执行上下文。全局执行上下文当JavaScript执行全局代码时,它会编译全局代码并创建一个全局执行上下文,并且在整个页面的生命周期内只有一份全局执行上下文。函数执行上下文当一个函数被调用时,函数体中的代码将被编译并创建一个函数执行上下文。一般在函数执行结束后,创建的函数执行上下文会被销毁。eval执行上下文使用eval函数时,还会编译eval代码并创建执行上下文。10.2包含内容执行上下文在不同版本中定义不同。这是在《重学前端》中总结的。目前主要有三个版本:Executioncontext在ES3中,包含三部分。scope:作用域,也常被称为作用域链。variableobject:可变对象,用来存放可变对象。这个值:这个值。在ES5中,我们改进了命名方式,将执行上下文的前三部分改为如下。Lexicalenvironment:词法环境,获取变量时使用。(let、const、with()、try-catch创建的变量存在词法环境)variableenvironment:变量环境,声明变量时使用。(变量环境中存在通过var声明或function(){}声明的变量)thisvalue:这个值。在ES2018中,执行上下文又变成了这样,this的值包含在词法环境中,但是增加了很多内容。Lexicalenvironment:词法环境,获取变量或this值时使用。variableenvironment:变量环境,声明变量时使用codeevaluationstate:用于还原代码执行位置。Function:当要执行的任务是函数时使用,表示正在执行的函数。ScriptOrModule:当执行的任务是脚本或模块时使用,表示正在执行的代码。Realm:底层库和使用的内置对象实例。Generator:只有生成器上下文才有这个属性,表示当前的生成器。10.3Executioncontextlifecycle在executioncontextlifecycle部分(会根据ES3阶段的内容介绍,因为感觉后面定义的名词内容虽然比较全面,但是确实不好记),它分为两个阶段:创建阶段和执行阶段,每个阶段负责不同的事情。(注:每部分都是一道题,详细解释见后续题)创建阶段创建阶段主要负责生成变量对象,建立作用域链,确定this点。创建代码执行阶段后,将开始执行代码。这时候会执行变量赋值、函数引用等代码。10.4代码执行过程【008-009】介绍了代码和函数的执行过程,但是这个介绍只是从宏观上介绍,没有详细的介绍。下面将从调用栈的角度详细阐述代码的实现过程。创建全局上下文(全局EC)。将其压入栈底;全局执行上下文(调用者)自上而下逐行执行。遇到函数时,将函数执行上下文(callee)压入执行栈顶;函数执行上下文被激活,成为activeEC,函数中的代码开始执行,调用者被挂起;函数执行完毕后,被调用者被pop出执行栈,控制权交还给全局上下文(调用者),继续执行;下面举例说明执行过程。vara=1;functionf1(){//...}functionf2(){f1();//...}f2();上述代码的调用栈如下:Push到栈底;变量a、函数f1、f2都会保存在全局执行上下文的变量环境中;全局执行上下文开始执行,变量a被赋值为1,当函数f2被调用时,会创建对应的函数,执行上下文被压入调用栈。函数f2的执行上下文创建完成后,将进入代码执行阶段;函数f2执行过程中会调用函数f1,相应的函数执行上下文会被创建并压入调用栈;f1将执行阶段;f1函数返回时,函数的执行上下文从栈顶弹出;f2函数返回后,也立即从栈顶弹出f2函数对应的执行上下文;至此代码执行结束,页面完成时销毁全局执行上下文。10.5结论知道了执行上下文,你需要记住一些结论性的东西。在调用栈中,只有栈顶上下文在执行,其他上下文需要等待;只有一个全局上下文,当浏览器关闭时弹出堆栈;函数执行上下文的数量没有限制;每次调用一个函数,都会为其创建一个新的执行上下文,并将执行上下文压入调用栈,然后JavaScript引擎会执行函数代码,即使调用它也是如此自己的功能;当前函数执行完毕后,JavaScript引擎会从栈中弹出函数的执行上下文;当分配的调用堆栈空间已满时,会导致“堆栈溢出”问题。本文转载自微信公众号“牵着风筝”,可通过以下二维码关注。转载本文请联系风筝持有人公众号。