深入理解JavaScript (1) —— 执行上下文与执行上下文栈

lidashuang 发布于2019-08-22 11:04 / 2198人阅读

摘要：执行上下文栈通过上文我们知道预处理全局代码时，会产生一个执行上下文环境。实现这一压栈出栈过程的机制就是执行上下文栈。

JavaScript的解析(预处理)与执行

详见：http://www.cnblogs.com/foodoi...

执行上下文

JavaScript在执行一个“代码段”之前，即解析(预处理)阶段，会先进行一些“准备工作”，例如扫描JS中var定义的变量、函数名等，进而生成执行上下文。

JS中的“代码段”分为三种：全局代码段、函数体代码段、eval代码段。（注：ES6之前，JS不存在“代码块”作用域的概念，即除了函数之外所有“{}”里的代码，都属于全局作用域）

全局代码段“准备工作”包括：

1.变量、函数表达式 —— 变量声明，默认赋值为undefined；
2.this —— 赋值；
3.函数声明 —— 赋值。

函数体代码段“准备工作”包括：

1.变量、函数表达式 —— 变量声明，默认赋值为undefined；
2.this —— 赋值；
3.函数声明 —— 赋值；
4.参数 —— 赋值；
5.argument —— 赋值；
6.自由变量的取值作用域 —— 赋值。

evel()不推荐使用，所以不再分析evel代码段。

至此，“执行上下文”的定义可以通俗化为 —— 在执行代码段之前(预处理阶段)，把将要用到的所有变量都事先拿出来，有的直接赋值，有的先用undefined占个空，这些变量共同组成的词法环境，即为执行上下文环境。

在执行js代码时，会有数不清的函数调用次数，会产生许多个上下文环境。这么多上下文环境该如何管理，以及如何销毁并释放内存呢？这就需要“执行上下文栈”来解释了。

执行上下文栈

通过上文我们知道：预处理全局代码时，会产生一个执行上下文环境。每次调用函数的预处理时，都会产生一个执行上下文环境。其实，当这个函数调用完成时，它的执行上下文环境以及其中的数据就会被销毁，执行过程再重新回到全局上下文环境。同一时刻，处于活动状态的执行上下文环境只有一个。

实现这一压栈出栈过程的机制就是“执行上下文栈”。

执行上下文栈的压栈出栈过程实例代码：

var a = 10,                 //1.进入全局上下文环境
    fn,
    bar = function(x) {
        var b = 5;
        fn(x+b);            //3.进入fn函数上下文环境
    };

fn = function(y) {
    var c = 5;
    console.log(y+c);
}

bar(10);                    //2.进入bar函数上下文环境

预处理时，首先创建全局上下文环境：

然后执行代码，全局上下文环境中的变量都被赋值：

当执行到调用bar函数时，跳转到bar函数内部，对其进行预处理，创建bar函数的执行上下文环境：

并将这个函数上下文环境压栈，设置为活动状态，开始执行bar函数体内代码：

当执行到调用fn函数时，跳转到bar函数内部，对其进行预处理，创建fn函数的执行上下文环境，并压栈，设置为活动状态，开始执行fn函数体内代码：

fn函数执行完毕后，此次调用fn所生成的上下文环境出栈，并且被销毁（已经用完了，就要及时销毁，释放内存），bar函数的执行上下文环境回到活动状态：

bar函数执行完毕后，调用bar函数所生成的上下文环境出栈，并且被销毁（已经用完了，就要及时销毁，释放内存），全局上下文环境回到活动状态：

全局代码执行完成，全局上下文环境出栈，并且销毁（已经用完了，就要及时销毁，释放内存），代码执行完毕。

以上是一段代码执行上下文环境的完整变化过程，但有一种情况的代码，其执行上下文环境并未按上述过程销毁，这就是接下来我们的重点研究对象 —— 闭包！

要谈闭包，我们还得先认识下作用域和自由变量，敬请期待... ...

云服务器 GPU云服务器执行上下文上下文栈深入理解javascript javascript暂停执行

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91710.html

深入理解JavaScript执行上下文和执行栈

摘要：执行上下文和执行栈是中关键概念之一，是难点之一。理解执行上下文和执行栈同样有助于理解其他的概念如提升机制作用域和闭包等。函数执行完成，函数的执行上下文出栈，并且被销毁。前言如果你是一名 JavaScript 开发者，或者想要成为一名 JavaScript 开发者，那么你必须知道 JavaScript 程序内部的执行机制。执行上下文和执行栈是JavaScript中关键概念之一，是Ja...

leiyi 2019-08-02 14:34 评论0 收藏0
深入理解JavaScript执行上下文和执行栈

摘要：执行上下文和执行栈是中关键概念之一，是难点之一。理解执行上下文和执行栈同样有助于理解其他的概念如提升机制作用域和闭包等。函数执行完成，函数的执行上下文出栈，并且被销毁。前言如果你是一名 JavaScript 开发者，或者想要成为一名 JavaScript 开发者，那么你必须知道 JavaScript 程序内部的执行机制。执行上下文和执行栈是JavaScript中关键概念之一，是Ja...

silenceboy 2019-08-23 16:00 评论0 收藏0
【进阶1-2期】JavaScript深入之执行上下文栈和变量对象

摘要：本计划一共期，每期重点攻克一个面试重难点，如果你还不了解本进阶计划，点击查看前端进阶的破冰之旅本期推荐文章深入之执行上下文栈和深入之变量对象，由于微信不能访问外链，点击阅读原文就可以啦。（关注福利，关注本公众号回复[资料]领取优质前端视频，包括Vue、React、Node源码和实战、面试指导）本周正式开始前端进阶的第一期，本周的主题是调用堆栈，今天是第二天。本计划一共28期，每期...

Richard_Gao 2019-08-23 13:46 评论0 收藏0
深入理解JavaScript (5) —— 闭包

摘要：以上是从作用域的角度对闭包的理解，我们还可以结合执行上下文栈来理解闭包。这就是需要理解闭包的核心内容。即，执行到第行时，全局上下文环境将变为活动状态，但是上下文环境依然会在执行上下文栈中。理解了上下文环境、作用域、作用域链以及自由变量，我们再来聊聊闭包。我们不急于给出闭包的概念，先从应用闭包的两种情况 —— 1.函数作为返回值，2.函数作为参数被传递 —— 来直观的认识它。第一，...

longmon 2019-08-22 11:04 评论0 收藏0
【进阶1-1期】理解JavaScript 中的执行上下文和执行栈

摘要：首次运行代码时，会创建一个全局执行上下文并到当前的执行栈中。执行上下文的创建执行上下文分两个阶段创建创建阶段执行阶段创建阶段确定的值，也被称为。（关注福利，关注本公众号回复[资料]领取优质前端视频，包括Vue、React、Node源码和实战、面试指导）本周正式开始前端进阶的第一期，本周的主题是调用堆栈，，今天是第一天本计划一共28期，每期重点攻克一个面试重难点，如果你还不了解本进...

import. 2019-08-23 13:46 评论0 收藏0