前端百题斩【010】——通俗易懂的JavaScript执行上下文-阿里云开发者社区

前端百题斩【010】——通俗易懂的JavaScript执行上下文

2022-05-12 103

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 前端百题斩【010】——通俗易懂的JavaScript执行上下文

JavaScript标准把一段代码（包括函数）执行所需的所有信息定义为“执行上下文”（可理解为当前代码的执行环境，同一个函数在不同的环境中执行，会因访问的数据不同产生不一样的结果），其是执行的基础设施。执行上下文包含的内容有很多，下面从类型、包含内容、生命周期、执行过程、结论来进行阐述。

执行上下文主要分为三类：全局执行上下文、函数执行上下文、eval函数执行上下文。

当JavaScript执行全局代码的时候，会编译全局代码并创建全局执行上下文，而且在整个页面的生存周期内，全局执行上下文只有一份。

当调用一个函数的时候，函数体内的代码会被编译，并创建函数执行上下文，一般情况下，函数执行结束之后，创建的函数执行上下文会被销毁。

当使用eval函数的时候，eval代码也会被编译，并创建执行上下文。

执行上下文在不同的版本中定义不同，《重学前端》中对此进行了总结，目前主要有三个版本：

在执行上下文生命周期部分（将按照ES3阶段的内容进行介绍，因为自我感觉后续定义的名词内容虽然更全面，但背起来确实不是很容易），分为创建阶段和执行阶段两个阶段，每个阶段负责不同的事情。（注：，每一部分都是一个问题，详细解释看后续百题斩。）

创建阶段主要负责生成变量对象、建立作用域链以及确定this指向。

创建完成之后，就会开始执行代码，这个时候，会完成变量赋值，函数引用，以及执行其他代码。

百题斩【008-009】介绍了代码和函数的执行过程，但是这个介绍只是从宏观方面进行介绍，并没有进行详细的介绍，下面将从调用栈这个角度详细阐述一下代码的执行过程。

下面将举一个例子来阐述该执行过程。

var a = 1;
function f1() {
    // ……
}
function f2() {
    f1();
    // ……
}
f2();

上述代码的调用栈如下所示：

了解了执行上下文，需要记住一些结论性的东西

前端百题斩【010】——通俗易懂的JavaScript执行上下文