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;
}
如果我们能够直观地看到到目前为止我们运行的代码的内存
，我们会看到这样的东西：
| 记忆中的价值 | |
|---|---|
| 2 | |
| 5 | |
| 函数定义 |
有趣的一行。当 javascript 引擎到达下一行时，它会创建标签result，但此时，它还不知道需要为标签分配什么值，因为该值是执行函数的结果，所以首先，它需要执行函数，做函数需要做的任何事情，并从返回值中获取结果。
const result= sum(num1, num2);
此时，引擎将函数添加到调用堆栈
，并创建一个新的执行上下文，这是内存中的一个新空间，javascript可以存储args的值以及所有其他属性在函数内部而不与全局上下文发生冲突。
和b，它们是给参数的名称，并分别分配参数2和5的值。 如果我们能看到这个特定时刻的记忆，我们会看到这样的东西：
立即学习“Java免费学习笔记（深入）”；
| 记忆中的价值 | |
|---|---|
| 2 | |
| 5 | |
| 2 + 5 = 7 |
和b之间的sum的值，因此引擎用arguments的值替换参数并将该值返回给全局执行上下文。最后，该函数从调用堆栈中删除，只保留全局上下文。
，我们可以通过控制台日志在控制台上打印该值。 让我们看看全局内存现在是什么样子：
立即学习“Java免费学习笔记（深入）”；
| 记忆中的价值 | |
|---|---|
| 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时跳转到该行，全局内存将如下所示：
| 记忆中的价值 | |
|---|---|
| 2 | |
| 5 | |
| 函数定义 | |
| 7 | |
| 函数定义 |
result2分配什么值，要获取该值，首先需要使用参数执行函数sumthreenumbers。该函数添加到调用堆栈，并创建一个新的执行上下文。执行上下文将如下所示：
| 记忆中的价值 | |
|---|---|
| 4 | |
| 6 | |
| 2 |
现在让我们看一下我们的调用堆栈
立即学习“Java免费学习笔记（深入）”；
项（除了始终存在的全局上下文）。 为了能够获得结果值，
需要首先执行函数 sum，因此引擎会将函数添加到调用堆栈并为 sum 函数创建一个新的执行上下文。
，javascript 需要先运行sum才能继续运行sumthreenumbers。 这是查看函数 sum 的执行上下文的方式：
立即学习“Java免费学习笔记（深入）”；
| 记忆中的价值 | |
|---|---|
| 4 | |
| 6 | |
| 4 + 6 = 10 |
立即学习“Java免费学习笔记（深入）”；
并且执行上下文将如下所示：
| 记忆中的价值 | |
|---|---|
| 4 | |
| 6 | |
| 2 | |
| 10 + 2 = 12 |
并从调用堆栈中删除。
将被分配给属性result2并且值12将显示在控制台中。 我希望这篇文章能帮助您了解
javascript调用堆栈是如何工作的，如果是的话请留下评论和点赞。我在下一篇中见到你！
以上就是揭秘 JavaScript 调用堆栈：代码的实际运行方式的详细内容，更多请关注php中文网其它相关文章！
