一篇文章弄懂javascript中的执行栈与执行上下文

这篇文章主要介绍了JavaScript中的执行栈与执行上下文。从基本的概念出发，逐步深入了执行栈的工作机制，以及执行上下文的创建、类型和组成。通过具体的示例代码，帮助读者更好地理解这些抽象概念。

执行栈

在JavaScript运行时，会创建一个全局执行上下文，并将其推入执行栈。每当函数调用时，都会为该函数创建一个新的执行上下文，并将其推入栈顶。函数执行完毕后，其执行上下文会从栈中弹出，继续下一个执行上下文。这种机制类似于栈的先进后出（FILO）操作。

执行上下文

执行上下文是JavaScript代码被和执行时的环境抽象。它分为三种类型：全局执行上下文、函数执行上下文和Eval函数执行上下文。每种类型的执行上下文都有其特定的特点和用途。

在执行上下文的创建阶段，JavaScript引擎会创建词法环境（Lexical Environment）和变量环境（Variable Environment）。词法环境是一种包含标识符（变量/函数名称）和变量（实际对象、函数、原始值等）映射的数据结构。变量环境存储了变量的实际值。

在函数执行上下文中，词法环境还包括一个特殊的部分——arguments对象，它包含了传递给函数的参数信息。而在ES6中，词法环境和变量环境有所区别，前者用于存储函数声明和let、const绑定，后者仅用于存储var绑定。

在执行阶段，所有变量都会被分配具体的值，代码开始执行。在这个阶段，this的值也会被确定下来。在全局上下文中，this指向全局对象；在函数上下文中，this的值取决于函数被调用的位置。

为了更好地理解这些概念，下面是一个简单的示例：

```javascript

let a = 'Hello';

function first() {

console.log('Inside first function');

second();

console.log('Again inside first function');

}

function second() {

console.log('Inside second function');

}

first();

console.log('Inside Global execution context');

```

在这个示例中，当调用`first()`函数时，会创建一个新的函数执行上下文并将其推入执行栈。在这个上下文中，会先打印"Inside first function"，然后调用`second()`函数，再打印"Inside second function"，最后返回全局上下文并打印"Again inside first function"。在全局上下文中打印"Inside Global execution context"。

理解JavaScript的执行栈与执行上下文对于理解闭包、作用域、变量提升等概念至关重要。希望这篇文章能帮助你更好地理解这些概念，并在实际开发中加以应用。代码之旅：执行上下文

当JavaScript代码开始执行时，它首先进入一个重要的环节——创建执行上下文。这个过程可以被划分为两个阶段。

第一阶段：进入全局执行上下文

在这段代码中，我们首先看到的是全局作用域中的变量声明和函数定义。JavaScript引擎会创建一个全局执行上下文来执行这些全局代码。变量“a”被赋值为20，常量“b”被赋值为30。变量“c”尚未被赋值。

第二阶段：进入函数执行上下文

紧接着，我们看到了一个名为“multiply”的函数定义。当这个函数被调用时，JavaScript引擎会创建一个新的函数执行上下文。在这个函数内部，又声明了一个局部变量“g”，并被赋值为20。函数的参数“e”和“f”在函数内部被传入的值分别为20和30。然后，函数将返回“e”、“f”和“g”的乘积。我们将这个乘积赋值给变量“c”。

整个过程可以这样理解：全局执行上下文被创建并执行全局代码；然后，当函数被调用时，创建函数执行上下文并执行函数内的代码。在每个执行阶段，JavaScript引擎都会创建一个独立的执行环境，以便处理变量、函数和作用域等问题。这样，我们就可以确保函数内部的局部变量不会与全局变量发生冲突。

这段代码在执行过程中，首先创建全局执行上下文并执行全局变量和函数的声明，然后创建函数执行上下文并执行函数内部的代码。通过这个过程，我们理解了JavaScript如何管理执行上下文，以及如何在不同的上下文中处理变量和函数。在JavaScript的世界中，全局上下文与执行函数上下文共同编织了一幅精细的画卷。让我们揭开这幅画卷的一角，看看其中的奥妙。

全局上下文宛如一个宏大的舞台，其中包含了词法环境、变量环境以及this绑定。在这个舞台上，各种元素有序排列，等待演出的开始。当代码执行时，变量被逐一赋值，全局上下文的内涵逐渐丰富起来。

当JavaScript引擎遇到函数multiply(20, 30)时，一个新的函数上下文被创建。这个上下文仿佛一个临时的舞台，用于执行特定的任务。其中包含了词法环境、变量环境以及this绑定。在这个临时的舞台上，函数参数被赋予特定的值，变量环境也被逐渐填充。值得注意的是，此时的函数上下文可以访问到全局上下文的词法环境。

随着函数multiply的执行，函数上下文进入执行阶段。在这个阶段，函数内部的代码开始运行，变量被赋予实际的值，this绑定也被确定。当函数执行完毕后，返回一个值并赋值给变量c，全局上下文被更新。这个过程就像是舞台上的演出结束，演员们在掌声中谢幕，然后幕布缓缓落下。整个程序在这一系列的上下文中完成了一次生命周期的循环。

尊敬的读者们，以上就是我们这篇文章所涵盖的全部内容了。在您的学习或工作中，我们诚挚地希望这篇文章能为您带来一定的启示和帮助。在此，衷心感谢各位读者对狼蚁SEO的持续关注与支持。接下来，让我带您走进知识的殿堂，一起那些引人深思的议题。

在这个充满挑战与机遇的时代，学习永远是我们不断前行的动力源泉。无论您是初学者还是专业人士，我们都相信，在狼蚁SEO这个平台上，您总能找到适合自己的学习资源。这里汇聚了众多领域的知识精华，是您学习成长的最佳伙伴。让我们一起努力，共同迈向成功的彼岸。

我们也要感谢您在阅读本文时所产生的共鸣。正是因为您的关注和支持，我们才能不断前行，为更多的读者带来有价值的内容。在未来的日子里，我们将继续致力于为大家提供高质量的文章和实用的建议，帮助您在激烈的竞争中脱颖而出。

我们深知在信息时代，掌握有效的学习方法至关重要。在狼蚁SEO，我们不仅为您提供丰富的知识资源，还致力于分享实用的学习技巧和方法。我们希望与您一起学习的奥秘，共同分享成功的喜悦。让我们携手共进，共创美好未来！

再次感谢您对狼蚁SEO的关注与支持。让我们期待更多精彩的文章和实用的建议，共同开启智慧的大门，迈向成功的巅峰。在此，我们诚挚地祝愿您在学习和工作中取得更加辉煌的成就！