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;}
如果我们能够
直观地看到到目前为止我们运行的代码的内存
，我们会看到这样的东西：
num12num25总和函数定义下一行是
非常
有趣的一行。当 javascript 引擎到达下一行时，它会创建标签result，但此时，它还不知道需要为标签分配什么值，因为该值是执行函数的结果，所以首先，它需要执行函数，做函数需要做的任何事情，并从返回值中获取结果。
const result= sum(num1, num2);
此时，引擎
将函数添加到调用堆栈
，并创建一个新的执行上下文，这是内存中的一个新空间，javascript可以存储args的值以及所有其他属性在函数内部而不与全局上下文发生冲突。
总和全球首先，引擎在内存中创建标签
a
和b，它们是给参数的名称，并分别分配参数2和5的值。 如果我们能看到这个特定时刻的记忆，我们会看到这样的东西：
立即学习“Java免费学习笔记（深入）”；
a2b5返回2 + 5 = 7在这种情况下，函数非常简单，只返回
a
和b之间的sum的值，因此引擎用arguments的值替换参数并将该值返回给全局执行上下文。最后，该函数从调用堆栈中删除，只保留全局上下文。
全球此时，函数的结果被分配给标签
result
，我们可以通过控制台日志在控制台上打印该值。 让我们看看全局内存现在是什么样子：
立即学习“Java免费学习笔记（深入）”；
num12num25总和函数定义结果7你注意到了吗？标签
结果
的值为7？而且sum里面仍然有函数定义。 我们来看看接下来的代码：
const num1 = 2;const num2 = 5;function sum(a, b){return a + b;}const result= sum(num1, num2);console.log(result) // 7function 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
时跳转到该行，全局内存将如下所示：
num12num25总和函数定义结果7三个数字的和函数定义就像前面的示例一样，javascript 引擎
不知道要为标签
result2分配什么值，要获取该值，首先需要使用参数执行函数sumthreenumbers。该函数添加到调用堆栈，并创建一个新的执行上下文。执行上下文将如下所示：
x4y6z2因此 javascript 做的第一件事就是创建参数标签并分配参数提供的值。
现在让我们看一下我们的调用堆栈
立即学习“Java免费学习笔记（深入）”；
三个数字的和全球如您所见，调用堆栈只有
sumthreenumbers
项（除了始终存在的全局上下文）。 为了能够获得结果值，
需要首先执行函数 sum
，因此引擎会将函数添加到调用堆栈并为 sum 函数创建一个新的执行上下文。
总和三个数字的和全球由于 sum 函数位于
调用堆栈的顶部
，javascript 需要先运行sum才能继续运行sumthreenumbers。 这是查看函数 sum 的执行上下文的方式：
立即学习“Java免费学习笔记（深入）”；
a4b6返回4 + 6 = 10如你所知，它将返回 _10 _并且将从调用堆栈中删除
立即学习“Java免费学习笔记（深入）”；
三个数字的和全球javascript 将继续执行
sumthreenumbers
并且执行上下文将如下所示：
x4y6z2返回10 + 2 = 12它将返回值
12
并从调用堆栈中删除。
全球然后值
12
将被分配给属性result2并且值12将显示在控制台中。我希望这篇文章能帮助您了解
javascript调用堆栈是如何工作的
，如果是的话请留下评论和点赞。我在下一篇中见到你！
以上就是揭秘 JavaScript 调用堆栈：代码的实际运行方式的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1490611.html
微信扫一扫 
支付宝扫一扫 
