当前位置：首页 > 文章列表 > 文章 > 前端 > 揭秘 JavaScript 调用堆栈：代码的实际运行方式

揭秘 JavaScript 调用堆栈：代码的实际运行方式

来源：dev.to 2024-08-25 16:36:56 0浏览收藏

你在学习文章相关的知识吗？本文《揭秘 JavaScript 调用堆栈：代码的实际运行方式》，主要介绍的内容就涉及到，如果你想提升自己的开发能力，就不要错过这篇文章，大家要知道编程理论基础和实战操作都是不可或缺的哦！

javascript 调用堆栈是如何工作的，是每个前端开发人员在其职业生涯中至少问过一次的问题，在我看来，这个问题在大多数地方都没有得到解答，而且答案并不总是清晰或容易的去理解。这就是为什么我决定在这篇文章中讨论这个主题。

让我们从头开始吧。 javascript 引擎

同步逐行运行代码，每次执行函数时，它都会创建一个执行上下文（内存中的空间，用于存储仅存在于该函数内部的所有作用域属性）并添加函数到调用堆栈.

javascript 只执行位于

栈顶的函数的代码，当函数完成并返回其值时，引擎从调用堆栈中删除该函数并开始处理下一个函数。

当

调用堆栈为空时，javascript引擎继续在下一个全局上下文中运行代码，或者相同的，继续执行javascript文件根目录中的行，而不执行属于任何函数。

让我们逐行看一些示例：

const num1 = 2;
const num2 = 5;

function sum(a, b){
return a + b;
}

const result= sum(num1, num2);
console.log(result) // 7

这是一段非常简单的代码，定义了 2 个常量（num1 和 num2），然后定义了一个函数

sum 对 2 个数字求和并返回总和的结果。最后，创建常量 result，并将使用参数 num1 和 num2 执行 sum 的结果分配给它。然后结果的值就会打印在控制台上。

如果您认为前面的解释太简单或太复杂并且没有解释任何东西，

请耐心等待，我们正在讲有趣的事情。

让我们逐行

看看 javascript 引擎在做什么。在第一行中，引擎创建一个标签num1并将存储在内存中值2.

const num1 = 2;

第二行对标签num2

执行相同的操作。它创建一个标签num2并在内存中存储值5.

const num2 = 5;

这意味着，每当全局范围

内的人需要num2的值时，引擎就会更改标签并使用值5代替。让我们继续下一行。下一行是

函数

sum。你认为引擎会做什么？你认为它会执行该函数还是将其添加到调用堆栈中？不！引擎要做的是存储一个名为sum的新标签，并将括号内的代码存储在内存中。或者相同的是，它将存储函数定义并将其分配给sum标签。

function sum(a, b){
return a + b;
}

如果我们能够直观地看到到目前为止我们运行的代码的内存

，我们会看到这样的东西：

标签名称num1num2总和

记忆中的价值
2
5
函数定义

下一行是

非常

有趣的一行。当 javascript 引擎到达下一行时，它会创建标签result，但此时，它还不知道需要为标签分配什么值，因为该值是执行函数的结果，所以首先，它需要执行函数，做函数需要做的任何事情，并从返回值中获取结果。

const result= sum(num1, num2);

此时，引擎将函数添加到调用堆栈

，并创建一个新的执行上下文，这是内存中的一个新空间，javascript可以存储args的值以及所有其他属性在函数内部而不与全局上下文发生冲突。

调用堆栈总和全球

首先，引擎在内存中创建标签

和b，它们是给参数的名称，并分别分配参数2和5的值。如果我们能看到这个特定时刻的记忆，我们会看到这样的东西：

标签名称ab返回

记忆中的价值
2
5
2 + 5 = 7

在这种情况下，函数非常简单，只返回

和b之间的sum的值，因此引擎用arguments的值替换参数并将该值返回给全局执行上下文。最后，该函数从调用堆栈中删除，只保留全局上下文。

调用堆栈全球

此时，函数的结果被分配给标签

result

，我们可以通过控制台日志在控制台上打印该值。让我们看看全局内存现在是什么样子：

标签名称num1num2总和结果

记忆中的价值
2
5
函数定义
7

你注意到了吗？标签

结果

的值为7？而且sum里面仍然有函数定义。我们来看看接下来的代码：

const num1 = 2;
const num2 = 5;

function sum(a, b){
return a + b;
}

const result= sum(num1, num2);
console.log(result) // 7

function sumThreeNumbers = (x,y,z) => {
return sum(x, y) + z
}

const result2 = sumThreeNumbers(4,6,2)
console.log(result2) // 12

主要区别在于，现在我们有了一个新的 sumthreenumbers

函数，并且我们正在创建一个新的 result2 常量，并使用参数 4、6 和 2 分配运行函数 sumthreenumbers 的值。让我们看看

运行嵌套函数时调用堆栈是如何工作的

。如果我们在定义常量

result2

时跳转到该行，全局内存将如下所示：

标签名称num1num2总和结果三个数字的和