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

你在学习文章相关的知识吗？本文《揭秘 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;
}

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

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

非常

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

const result= sum(num1, num2);

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

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

a

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

a

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

result

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

结果

的值为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

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

不知道要为标签

result2分配什么值，要获取该值，首先需要使用参数执行函数sumthreenumbers。该函数添加到调用堆栈，并创建一个新的执行上下文。执行上下文将如下所示：

现在让我们看一下我们的调用堆栈

sumthreenumbers

项（除了始终存在的全局上下文）。 为了能够获得结果值，

需要首先执行函数 sum

，因此引擎会将函数添加到调用堆栈并为 sum 函数创建一个新的执行上下文。

调用堆栈的顶部

，javascript 需要先运行sum才能继续运行sumthreenumbers。 这是查看函数 sum 的执行上下文的方式：

sumthreenumbers

并且执行上下文将如下所示：

12

并从调用堆栈中删除。

12

将被分配给属性result2并且值12将显示在控制台中。 我希望这篇文章能帮助您了解

javascript调用堆栈是如何工作的

，如果是的话请留下评论和点赞。我在下一篇中见到你！

以上就是《揭秘 JavaScript 调用堆栈：代码的实际运行方式》的详细内容，更多关于的资料请关注golang学习网公众号！