原文： JS学习系列 01 - 编译原理和作用域

在学习 javascript 的过程中，我们第一步最应该了解和掌握的就是作用域，与之相关还有程序是怎么编译的，变量是怎么查找的，js 引擎是什么，引擎和作用域的关系又是什么，这些是 javascript 这门语言最基础的地基，至于对象、函数、闭包、原型链、作用域链以及设计模式等等都是地基以上的建筑，只有地基打牢了，建筑才会稳。同样只有先把最基础的部分掌握了，之后的扩展学习才会更容易。

这一节我要说的，就是作用域和编译原理，从这里开始，我会一点点的把深入学习 javascript 的过程中总结的知识点以及遇到的问题，一篇一篇的梳理出来，如果有志同道合的朋友，可以关注我这个系列，我们一起玩转 javascript。

1. 编译原理

大家通常把 javascript 归类为一种“动态”或“解释执行”的语言，但事实上，它是一门编译语言，但和传统的编译语言不同，它不是提前编译的，编译结果也不能进行移植。

在传统编译语言中，程序在执行之前会经历三个步骤，统称为“编译”：

• 分词/词法分析
  这个过程会把字符串分解成有意义的代码块，这些代码块被称为词法单元。
  例如 var a = 5; 这段程序通常会被分解成下面这些词法单元： var、a、=、5、; 。空格是否会被当成词法单元取决于空格在这门语言中是否有意义。
• 解析/语法分析
  这个过程是将词法单元流（数组）转换成一个由元素逐级嵌套所组成的代表了程序语法结构的树。这个树被称为“抽象语法树”（Abstract Syntax Tree，AST）。
  var a = 5; 的抽象语法树中可能如下图所示：

  

  抽象语法树

• 代码生成
  将 AST 转换为可执行代码的过程被称为代码生成。这个过程与语言、目标平台等息息相关。简单来说，就是通过某种方法可以将 var a = 5; 的 AST 转化为一组机器指令，用来创建一个叫做 a 的变量（包括分配内存等），并将一个值 5 存储在 a 中。

比起那些编译过程只有三个步骤的语言的编译器来说，javascript 引擎要复杂的多。
例如，在词法分析和代码生成阶段有特定的步骤来对运行性能进行优化，包括对冗余元素进行优化等。

首先我们要清楚，javaScript 引擎不会有太多的时间来进行优化（相对于其它语言的编译器来说），因为与其它语言不同，javascript 的编译过程不是发生在构建之前的。

对于 javascript 来说，大部分情况下编译发生在代码执行前的几微秒（甚至更短）的时间内。在我们将要讨论的作用域背后，javascript 引擎用尽了各种办法（比如 JIT，可以延迟编译甚至重新编译）来保证性能最佳。

总结来说，任何 javascript 代码片段在执行前都要进行编译（预编译）。因此，javascript 编译器首先会对 var a = 5; 这段程序进行编译，然后做好执行它的准备，并且通常马上就会执行它。

2. 三位好友

要真正理解作用域，我们首先要知道 javascript 中有三位好朋友：

• 引擎
  从头到尾负责整个 javascript 程序的编译及执行过程。
• 编译器
  负责语法分析及代码生成。
• 作用域
  负责收集并维护由所有声明的标识符（变量）组成的一系列查询，并实施一套非常严格的规则，确定当前执行的代码对这些标识符的访问权限。

当遇见 var a = 5; 这一段代码时，其实执行了两个步骤：

（1）var a; 编译器会询问作用域是否已经有一个该名称的变量存在于同一作用域的集合中。如果是，编译器会忽略该声明，继续进行编译，否则它会要求在当前作用域的集合中声明一个新的变量，并命名为 a 。
（2）a = 5; 编译器会为引擎生成运行时所需的代码，这些代码用来处理 a = 5; 这个赋值操作。引擎运行时会首先询问作用域，在当前作用域的集合中是否存在一个叫作 a 的变量，如果是，引擎就会使用这个变量。如果否，引擎会继续向父级作用域中查找，直到找到全局作用域，如果在全局作用域中仍没有找到 a ，那么在非严格模式下，引擎会为全局对象新建一个属性 a ，并将其赋值为5，在严格模式下，引擎会报错误 ReferenceError: a is not defined。

总结来说，变量的赋值会执行两个操作，首先编译器会在当前作用域声明一个变量（如果之前没有声明过），然后在运行时引擎会在当前作用域中查找该变量（找不到就向上一级作用域查找），如果能够找到就会对它赋值。

3. LHS 和 RHS

前面说到引擎在为变量赋值的时候会在作用域中查找变量，但是执行怎样的查找，用什么方式，会对最终的查找结果造成影响。

在 var a = 5; 这个例子中，引擎会对 a 进行 LHS 查询，当然，另外一个查找类型叫作 RHS。

对变量进行赋值所执行的查询叫 LHS（Left-hand Side）。
找到并使用变量值所执行的查询叫 RHS（Right-hand Side）。

举个例子：

function foo(a) {
   // 这里隐式包含了 a = 2 这个赋值，所以对 a 进行了 LHS 查询
   var b = a;
   // 这里对 a 进行了 RHS 查询，找到 a 的值，然后对 b 进行 LHS 查询，把 2 赋值给 b
   return a + b; 
   // 这里包含了对 a 和 b 进行的 RHS 查询
}

var c = foo(2);
// 这里首先对 foo 进行 RHS 查询，找到它是一个函数，然后对 c 进行 LHS 查询把 foo 赋值给 c 

所以上面的例子共包含 3 个 LHS 查询和 4 个 RHS 查询，你们都找对了吗？

4. 作用域嵌套

当一个块或函数嵌套在另一个块或函数中时，就发生了作用域嵌套。因此，在当前作用域中无法找到某个变量时，引擎就会在外层嵌套的作用域中继续查找，直到找到该变量，或抵达最外层的作用域（也就是全局作用域）为止。

举个例子：

function foo(a) {
   console.log(a + b);
}

var b = 2;

foo(2);    // 4

这里对 b 进行的 RHS 查询在 foo 作用域中无法找到，但可以在上一级作用域（这个例子中就是全局作用域）中找到。

总结来说，遍历嵌套作用域链的规则很简单：引擎从当前执行的作用域中开始查找变量，如果都找不到，就向上一级继续查找。当抵达最外层的全局作用域时，无论找到还是没找到，查找过程都会停止。

属于编译语言的JavaScript，编写的源代码在执行之前，会经历三个步骤，这个过程统称为“编译”。

三个步骤为：分词/词法分析 -> 解析/语法分析 ->  代码生成

第一步骤：分词/词法分析

分词：判断词法单元时，调用的是无状态的解析规则

词法分析：判断词法单元时，调用的是有状态的解析规则

过程：由字符组成的字符串分解成有意义的代码块（词法单元）

例如： var  a =2 ； =>  词法单元： var  |  a |  =  |  2 | ；

第二步骤：解析/语法分析

过程：将词法单元流(数组）转换成一个由元素逐级嵌套所组成的代表了程序语法结构的抽象数据树（AST）

例如： var  a =2 ；的抽象数据树

第三阶段：代码生成

 过程：将AST转换为可执行代码的过程被称为代码生成

参与以上这个编译过程的有三个角色：引擎、编译器、作用域

角色一：引擎

工作职责：从头到尾负责整个JavaScript程序的编译及执行过程

执行查询类型：LHS 、RHS

当变量出在赋值操作的左侧时进行LHS查询，出现在右侧时进行RHS查询

赋值操作的目标是谁-LHS

谁是赋值操作的源头-RHS

例子：

function foo(a) {
    
    var b = a;
    
    return a + b;
}

var c = foo(2);

LHS:  foo(a)中的a  |  var  c  =  | var b = 

RHS:  = a |  = foo(2) | return a + | return + b

引擎会在LHS和RHS的过程中，在作用域内寻找需要的变量和值

角色二：编译器

工作职责：负责语法分析及代码生成等活动

角色三：作用域

工作职责：负责收集并维护由所有声明的标识符(变量）组成的一系列查询，并实施一套非常严格的规则，确实当前执行的代码对这些标识符的访问权限

三个角色的协作过程：变量的赋值操作会执行两个动作

1. 在编译时，编译器会在当前作用域中声明一个变量
2. 在运行时，引擎会在作用域中查找该变量，如果能够找到就会对它赋值

作用域是什么？

• 简单的理解：作用域指的是一个变量的作用范围。 太简单了吧

• 几乎是所有编程语言最基本的功能之一，就是能够储存变量当中的值，并且可以在之后对这个值进行访问或修改。事实上，正是这种储存和访问变量的值的能力将状态带给了程序。

• 如果没有状态的这个概念，程序虽然也可以执行一些简单的任务，但是它会受到高度限制，做不到非常的有趣。

• 将变量引入程序会引起几个很有意思的问题，它们储存在哪里？最重要的是，当程序需要时如何才能找到它们？

• 以上的问题说明需要一套设计良好的规则来存储变量，并且在之后可以方便的找到这些变量。这套规则被称为作用域。

• 但是，究竟在哪些地方并且怎么样去设置这些作用域的规则呢？

  ---

  1.编译原理

  尽管我们通常将JavaScript归类为“动态“语言或“解释性执行”语言，但事实上它是一门编程语言。

  它与传统的编程语言不同，它不是提前编译的，编译的结果也不能在分布式系统中进行移植。

  JavaScript 引擎进行编译的步骤和传统的编译语言非常相似，在某些环节可能 比预想的要复杂。

  • JavaScript引擎不会有大量的（像其他语言编译器那么多的）时间用来进行优化，大部分情况下编译发生在代码执行前的几微秒（甚至更短的时间）， 因为它与其他语言不同，JavaScript的编译过程不是发生在构造之前的。

  • 简单来说，所有的JavaScript 代码片段在执行前都要进行编译（通常就在执行前）。因此， JavaScript 编译器首先会对 var a = 1; 这段程序进行编译，然后做好执行它的准备，并且 通常马上就会执行它。

     

  2.理解作用域！

   

  引擎	从头到尾负责整个 JavaScript 程序的编译及执行过程。
  编译器	负责语法分析及代码生成等脏活累活。
  作用域	负责收集并维护由所有声明的标识符（变量）组成的一系列查 询，并实施一套非常严格的规则，确定当前执行的代码对这些标识符的访问权限

   

 var a=1;
-当看到这段程序时，很可能认为这是一句声明，但引擎不这么看。事实上，引擎认为这里有两个完全不同的声明，
一个由编译器在编译时处理，另一个则由引擎在运行时处理。
​
-伪代码：声明一个变量，分配存储的空间，将其命名为a，然后将值1赋值给a并保存进这个变量。然而并不完全正确。
-事实上编译器会进行以下处理
​
1. 遇到 var a，编译器会询问作用域是否已经有一个该名称的变量存在于同一个作用域的
集合中。如果是存在，编译器会忽略该声明，继续进行编译；否则它会要求作用域在当前作
用域的集合中声明一个新的变量，并命名为 a。
​
2. 接下来编译器会为引擎生成运行时所需的代码，这些代码被用来处理 a =1 这个赋值
操作。引擎运行时会首先询问作用域，在当前的作用域集合中是否存在一个叫作 a 的
变量。如果是，引擎就会使用这个变量；如果否，引擎会继续查找该变量。
如果引擎最终找到了 a 变量，就会将 1 赋值给它。如果引擎最终都没有找到就会举手示意
并抛出一个异常！
​
​
总结：变量的赋值操作会执行两个动作，首先编译器会在当前作用域中声明一个变量（如
果之前没有声明过），然后在运行时引擎会在作用域中查找该变量，如果能够找到就会对
它赋值。

在JavaScript中一共有俩种作用域 : 全局作用域 函数作用域（局部作用域）

1.全局作用域

-直接写在script标签内部的JavaScript代码

全局作用域在打开页面的时候创建，在页面关闭的时候销毁
全局作用域中有一个window对象，它表示的是一个浏览器的窗口，它由浏览器创建，可以直接使用
全局作用域创建的变量会作为window对象的属性保存
全局作用域中的函数都会作为window对象的方法保存

-全局作用域中的变量在页面的任意地方都是可以访问到的。

window.οnlοad=function(){
            var a=5;
        fn1();//调用fn1();
            var c=6;
        fn2();//调用fn2();
        function fn1(){
            var b=10;
             console.log(a+b);//15
        }
        function fn2(){
             console.log(c)//6
         }
        }

2.函数作用域

当调用函数的时候创建函数作用域，函数执行完毕之后，作用域就会销毁。

每调用一次函数就会创建一个新的函数作用域，他们之间是相互独立的。

函数作用域中可以访问全局变量，但在全局作用域中无法访问到局部变量

        var a=3;
        fn();
        console.log(b);//b is not defined
        function fn(){
            var b=2;
            console.log(a-b);//1
        }

当函数作用域操作一个变量时，它会先在自身作用域中寻找，
如果有就直接使用，如果没有就会向上级作用域继续查找，
这样每次上升一级作用域，最后抵达全局作用域（顶层），
无论找到或者没有找到都将停止， 
如果全局作用域中仍然没有找到，
则会报错ReferenceError