每执行一行JavaScript代码,你知道除了引擎还有谁参与了吗？

作为一名前端开发，每天都会花大量的时间去编写 JavaScript 代码。但是你真的知道 JavaScript 是如何执行的吗？

比起那些编译过程只有三个步骤的语言的编译器，JavaScript就要复杂得多。

比如我们执行程序

var a = 2;
console.log(a);
复制代码

在执行这两行命令的过程中不仅仅只有引擎参与，其实也有很多其他的小伙伴参与了。

1. 编译器

   负责语法分析及代码生成。

2. 作用域

   负责收集并维护由所有声明的标识符组成的一系列查询，并且实施一套非常严格的规则等等。

3. 引擎

   一直参与整个JavaScript程序的编译及执行过程。

举个例子

function getName(Name) {
  console.log(Name, age);
}

var name = 'Andy';
var age = 22;
getName(name);
复制代码

上面的代码看起来是不是非常简单，只是简单的去声明了一个函数，两个基本类型参数，然后调用了一下这个函数。但是实际上在执行这几行代码过程中既有编译器的参与也有作用域的限制以及引擎的执行。

现在我根据上面的这个例子，好好的讲解一下编译器、作用域、引擎他们每个小伙伴做了什么

1. 首先肯定是我们的编译器先参与进来，它首先要看看我们的作用域中有没有 name、age这些变量，如果有，编译器会忽视这次声明，继续编译。如果没有，那么它会要求我们的作用域在当前作用域中去声明他们。
2. 确定好我们的变量后，我们的编译器小伙伴又要继续干活。它要为” = ‘Andy’ 、= 22 “等等赋值命令准备所需要的代码。
3. 第三步就是我们的引擎上场了，引擎会拿到编译器已经准备好的代码，然后去问我们的作用域，是不是存在一个叫做 name 的变量，如果有，引擎就会使用它，对 name 进行赋值。否则就会继续查找（这里的继续查找就是往上层遍历，一直到全局作用域为止），如果找不到，引擎就会抛出异常。

在这里插入一个小插曲

其实在执行我们的第三部分的时候，我们会引入一个 ‘LHS’ 和 ‘RHS’ 的概念。

LHS 的含义是赋值操作的左侧，RHS的含义是赋值操作的右侧。但是这样可能不好理解，所以我个人认为你可以这样去理解，LHS就是对变量进行修改赋值操作，RHS就是拿到变量。

我们还是拿上面的代码例子来讲解一下 LHS 和 RHS

在上面的例子中，LHS 操作一共有三处（= ‘Andy’、= 22、对形参赋值）; RHS 就比较多了，有var name 、var age、 getName() 、(name)、console 、log、Name 、age；

一门语言往往博大精深，我们不能只满足于使用它来完成任务，更要去了解清楚计算机每一步做了什么。一直怀着一颗好奇的心，那么技术肯定会越来越好。

PS:大家看了后觉得对自己有帮助可以三连留言,欢迎提出宝贵意见，也欢迎各位对相关技术有兴趣的开发者（由团队开发人员微信号x118422邀请）入群，在线解答讨论数据可视化、优化图表性能等方面的技术问题~