JavaScript 是如何工作的🔥 🤖 [视觉解释]

JavaScript 是世界上最受欢迎和最讨厌的语言之一。它被爱，因为它是有效的。您只需学习 JavaScript 即可制作全栈应用程序。它也被讨厌，因为它以出乎意料和令人不安的方式行事，如果您不投入理解该语言，可能会让您讨厌它💔。

这篇博客将解释 JavaScript 如何在浏览器中执行代码，我们将通过动画 gif 来学习它😆。看完这篇博文，你离成为Rockstar开发者又近了一步🎸😎

执行上下文

“ JavaScript 中的一切都发生在一个执行上下文中。”

我希望每个人都记住这句话，因为它是必不可少的。你可以假设这个执行上下文是一个大容器，当浏览器想要运行一些 JavaScript 代码时调用。

在这个容器中，有两个组件 1. 内存组件 2. 代码组件

内存组件也称为变量环境。在这个内存组件中，变量和函数被存储为键值对。

代码组件是容器中一次执行一行代码的地方。这个代码组件还有一个奇特的名字，即“执行线程”。我觉得听起来很酷！

JavaScript 是一种同步的单线程语言。这是因为它一次只能以特定的顺序执行一个命令。

代码的执行

举个简单的例子，

var a = 2;
var b = 4;

var sum = a + b;

console.log(sum);

在这个简单的例子中，我们初始化了两个变量 a 和 b 并分别存储了 2 和 4。

然后我们将a和b的值相加并将其存储在sum变量中。

让我们看看 JavaScript 将如何在浏览器中执行代码🤖

浏览器创建一个具有两个组件的全局执行上下文，即内存和代码组件。

浏览器将分两阶段执行 JavaScript 代码

1> 内存创建阶段

2> 代码执行阶段

在内存创建阶段，JavaScript 会扫描所有代码，并为代码中的所有变量和函数分配内存。对于变量，JavaScript 将在内存创建阶段存储 undefined，对于函数，它将保留整个函数代码，我们将在下面的示例中查看。

现在，在第二阶段，即代码执行，它开始逐行遍历整个代码。

当它遇到var a = 2 时，它将 2 分配给内存中的 'a'。到目前为止，'a' 的值是未定义的。

同样，它对 b 变量也做同样的事情。它将 4 分配给 'b'。然后它计算总和的值并将其存储在内存中，即 6。现在，在最后一步，它在控制台中打印总和值，然后在我们的代码完成时销毁全局执行上下文。

如何在执行上下文中调用函数？

JavaScript 中的函数与其他编程语言相比，工作方式有所不同。

举个简单的例子，

var n = 2;

function square(num) {
 var ans = num * num;
 return ans;
}

var square2 = square(n);
var square4 = square(4);

上面的例子有一个函数，它接受一个 number 类型的参数并返回数字的平方。

JavaScript 会在我们运行代码的第一阶段创建一个全局执行上下文并为所有变量和函数分配内存，如下所示。

对于函数，它会将整个函数存储在内存中。

激动人心的部分来了，当 JavaScript 运行函数时，它会在全局执行上下文中创建一个执行上下文。

当它遇到 var a = 2 时，它将 2 分配给内存中的“n”。第2行是一个函数，由于函数在内存执行阶段已经分配了内存，所以会直接跳转到第6行。

square2 变量将调用 square 函数，javascript 将创建一个新的执行上下文。

square 函数的这个新执行上下文将在内存创建阶段为函数中存在的所有变量分配内存。

为函数内部的所有变量分配内存后，它将一行一行地执行代码。它将获得 num 的值，该值等于第一个变量的 2，然后计算 ans。计算完 ans 后，它将返回将分配给 square2 的值。

一旦函数返回值，它将在完成工作时销毁其执行上下文。

现在它将对第 7 行或 square4 变量执行类似的过程，如下所示。

一旦所有代码执行完毕，全局执行上下文也将被销毁，这就是 JavaScript 在幕后执行代码的方式。

调用栈

当在 JavaScript 中调用一个函数时，JavaScript 会创建一个执行上下文。当我们将函数嵌套在函数中时，执行上下文会变得复杂。

JavaScript 在 Call Stack 的帮助下管理代码执行上下文的创建和删除。

堆栈（有时称为“下推堆栈”）是项目的有序集合，其中新项目的添加和现有项目的删除总是发生在同一端，例如。一叠书。

调用堆栈是一种在调用多个函数的脚本中跟踪其位置的机制。

让我们举个例子

function a() {
    function insideA() {
        return true;
    }
    insideA();
}
a();

我们正在创建一个函数 'a'，它调用另一个返回 true 的函数 'insideA'。我知道代码很笨，没有做任何事情，但它会帮助我们理解 JavaScript 如何处理回调函数。

JavaScript 将创建一个全局执行上下文。全局执行上下文将在代码执行阶段为函数“a”分配内存并调用“函数a”。

为函数 a 创建了一个执行上下文，它位于调用堆栈中的全局执行上下文之上。

函数 a将分配内存并调用函数insideA。为函数 insideA创建一个执行上下文，并将其放置在“函数 a”的调用堆栈之上。

现在，这个 insideA 函数将返回 true 并将从调用堆栈中删除。

由于“function a”执行上下文中没有代码，因此将从调用堆栈中删除。

最后，全局执行上下文也从调用堆栈中删除。