每执行一行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'、= 2二、对形参赋值）; RHS 就比较多了，有var name 、var age、 getName() 、(name)、console 、log、Name 、age；

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

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