JavaScript 真正的工作原理，你知道吗？

爱被打了一巴掌 2022-11-12 09:47 236阅读 0赞

你是否只是听说过JavaScript，但是不了解它的基本原理？不知道后台究竟发生了什么？在面试中遇到麻烦了吗？不用担心，这篇文章将帮助大家了解JavaScript的一些基本概念。你可能会，也可能不会在日常活动中使用这些概念，但是如果你对JavaScript世界感到好奇并想深入了解，那么我相信你会发现这些内容真的很有趣。

这篇文章将涵盖JS最基本的主题之一——执行上下文。好的，事不宜迟，让我们开始吧。

你听说过执行上下文吗？

执行上下文是JS中最基本的概念之一。可以这样说：

> JS中的所有东西都在执行上下文内发生的。

举个例子来便于理解。下面的代码用于找到给定数字的平方。

var n = 10;
    
    function square(number) { 
        var ans = number * number;
        return ans;
    }
    
    var squareOf5 = square(5);
    
    var squareOfn = square(n);

当我们运行JS程序时，就会创建一个执行上下文。此过程涉及两个阶段。第一阶段称为内存创建（Memory Creation）阶段，第二阶段称为代码执行（Code Execution）阶段。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70]  
在内存创建阶段，JS解析程序并查找变量和函数定义。如果遇到变量，就分配一个命名为undefined的特殊关键字，如果是函数，则JS会存储整个函数定义的副本。（查看上面的图表）。

> 注意：undefined不是一个值，而是JS中使用的特殊关键字，用于指示未定义或未被分配任何值的变量。

第二阶段是代码执行阶段。在此阶段，JS从头开始并以同步的方式运行（一次一行代码）。

> 注意：这可能成为你的第一个面试问题。“JavaScript是同步语言还是异步语言？”，我想现在你应该知道答案了。

var n = 10;
    
    function square(number) { 
        var ans = number * number;
        return ans;
    }
    
    var squareOf5 = square(5);
    
    var squareOfn = square(n);

在第1行中，n的值设置为10，因此JS删除了关键字undefined，并将值设置为10。现在，控制权转到下一个代码块。由于这是一个函数定义，因此这里没有代码执行，这样JS就跳过该函数定义并将控制移至第8行。一旦JS遇到函数调用square(5)，就会创建一个新的执行上下文，如下所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 1]  
现在，针对该函数调用重复执行上下文的整个过程。让我们看看函数块的执行是如何发生的。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 2]  
内存创建阶段有两个变量，number是函数参数，ans是本地变量。两者的值都将设置为undefined。在当前执行上下文的第二阶段，JS从此函数声明的第一行开始。由于我们在函数调用中将5作为参数传递，因此5被作为值分配给变量number。然后控制权转到下一行。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 3]  
在下一行代码中，JS执行number \* number，并将操作结果（25）存储在变量ans中。现在，可以看到下一行有return关键字。JS一旦遇到return关键字，就会将控制权移回到父级执行上下文。由于我们返回的是ans的值，因此将返回值25并将其存储在变量squareOf5中。记住：  
当控制权移回到进行函数调用的位置时，新创建的执行上下文将被删除。  
查看下图:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 4]  
现在，控制权转到下一行，这次又是函数调用，于是执行上下文的整个过程再次重复一遍。  
JS如何跟踪这些执行上下文？

这是通过称为调用堆栈（Call Stack）或执行堆栈（Execution Stack）的方式发生的。它跟常规堆栈差不多，但主要用于跟踪执行上下文。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 5]  
EC的代码执行部分，每当JS引擎遇到函数调用时，它都会创建一个新的执行上下文并将其推送到调用堆栈。  
引擎执行其执行上下文位于堆栈顶部的函数。完成此函数后，其执行堆栈就会从堆栈中弹出，然后继续执行脚本的其余部分。  
写在最后的话

现在你应该对执行上下文有了更多的了解。如果用简单的语言来解释执行上下文的重要性，那么可以说执行上下文是JS的核心。  
顺便要说明的是，本文并没有深入讲太多，但可以涵盖很多概念。、

感谢大家阅读本文。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70]: /images/20221022/a27798304ee042f39f294f723bbfddeb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 1]: /images/20221022/272ac58e55dd47628253d06787db11b5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 2]: /images/20221022/885e0de5611d4f0294789b225e920cc2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 3]: /images/20221022/846136dbedd246159d9a773987063e2c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 4]: /images/20221022/c33a61db68504dd58bc80e88ed284b2f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 5]: /images/20221022/f6f262cebb244e828cc8edec2f6ccc73.png