js基础之作用域

前言：
几乎所有编程语言最基本的功能之一，就是能够储存变量当中的值，但是这些变量住在哪里？换句话说，它们储存在哪里？最重要的是，程序需要时如何找到它们？这些问题说明需要一套设计良好的规则来存储变量，并且之后可以方便地找到这些变量。 这套规则被称为作用域。

但是，究竟在哪里而且怎样设置这些作用域的规则呢？首先我们要了解一下编译原理。

1、编译原理

在传统编译语言的流程中，程序中的一段源代码在执行之前会经历三个步骤，统称为“编译”。

这三个步骤分别是：1、词法分析；2、语法分析；3、代码生成。

• 词法分析：这个过程会将字符组成的字符串分解成有意义的代码块，被称为词法单元，例如 var a = 2;会被分解成 var、a、=、2、;。

• 语法分析：这个过程是将词法单元流转换成一个由元素逐级嵌套所组成的代表了程序语法结构的树。这个树被称为“抽象语法树”。再次拿 var a = 2来举例，这句代码生成的抽象语法树中有一个叫作 VariableDeclaration 的顶级节点，，接下来是一个叫作 Identifier（它的值是 a）的子节点，以及一个叫作 AssignmentExpression 的子节点。AssignmentExpression 节点有一个叫作 NumericLiteral（它的值是 2）的子节点。

• 代码生成：将 AST 转换为可执行代码的过程称被称为代码生成。抛开具体细节，简单来说就是有某种方法可以将 var a = 2; 的 AST 转化为一组机器指令，用来创建一个叫作 a 的变量（包括分配内存等），并将一个值储存在 a 中。

当然，JavaScript 引擎要复杂得多。因为在语法分析和代码生成阶段有特定的步骤来对运行性能进行优化，包括对冗余元素进行优化等。任何 JavaScript 代码片段在执行前都要进行编译（通常就在执行前）。因此， JavaScript 编译器首先会对 var a = 2; 这段程序进行编译，然后做好执行它的准备，并且通常马上就会执行它。下面为大家介绍参与到对程序 var a = 2; 进行处理的过程中的三位好基友。

2、三位好基友

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

当执行 var a = 2;这句代码时，这三位好基友是怎么配合的呢？

编译器：作用域大哥，你看看你这里有没有一个上面写着 a 的盒子？有的话我就不用带了，直接用，没有的话我就带一个新的过来。

作用域（情况1）：我这没有呢，你自己带来吧。

作用域（情况2）：你说巧不巧，我这刚好有一个，你拿去用吧。

编译器：好嘞，多谢作用域大哥，晚上请你喝奶茶。引擎大哥，我告诉你怎么往这个盒子里放东西，然后你去找作用域大哥要盒子，按照我的方法把2放进去。

引擎：木有问题的啦。

引擎：作用域小老弟，把你这叫 a 的盒子给我，我要向里边放点东西。你这要是没有的话，我就去找你爸要。

作用域：引擎大哥，你说好巧不巧，我这正好有一个，喏。

如果引擎最终找到了 a 变量，就会将 2 赋值给它。否则引擎就会举手示意并抛出一个异常！

3、左查询和右查询

在我们的例子中，引擎会为变量 a 进行 LHS 查询。另外一个查找的类型叫作 RHS，也就是左查询和右查询。

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

console.log( a );
复制代码

其中对 a 的引用是一个 RHS 引用，因为这里 a 并没有赋予任何值。相应地，需要查找并取得 a 的值，这样才能将值传递给 console.log(..)。

a = 2;
复制代码

这里对 a 的引用则是 LHS 引用，因为实际上我们并不关心当前的值是什么，只是想要为 = 2 这个赋值操作找到一个目标。

我们看下面这段代码：

function foo(a) { 
    console.log( a ); // 2 
}
foo( 2 );
复制代码

这时候，引擎和作用域两个好基友的对话：

引擎：我说作用域，我需要为 foo 进行 RHS 引用。你见过它吗？

作用域：别说，我还真见过，编译器那小子刚刚声明了它。它是一个函数，给你。

引擎：哥们太够意思了！好，我来执行一下 foo。

引擎：作用域，还有个事儿。我需要为 a 进行 LHS 引用，这个你见过吗？

作用域：这个也见过，编译器最近把它声名为 foo 的一个形式参数了，拿去吧。

引擎：大恩不言谢，你总是这么棒。现在我要把 2 赋值给 a。

引擎：哥们，不好意思又来打扰你。我要为 console 进行 RHS 引用，你见过它吗？

作用域：咱俩谁跟谁啊，再说我就是干这个。这个我也有，console 是个内置对象。 给你。

引擎：么么哒。我得看看这里面是不是有 log(..)。太好了，找到了，是一个函数。

引擎：哥们，能帮我再找一下对 a 的 RHS 引用吗？虽然我记得它，但想再确认一次。

作用域：放心吧，这个变量没有变动过，拿走，不谢。

引擎：真棒。我来把 a 的值，也就是 2，传递进 log(..)。

……

4、作用域嵌套

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

把作用域链比喻成一个建筑：

LHS 和 RHS 引用都会在当前楼层进行查找，如果没有找到，就会坐电梯前往上一层楼， 如果还是没有找到就继续向上，以此类推。一旦抵达顶层（全局作用域），可能找到了你所需的变量，也可能没找到，但无论如何查找过程都将停止。

以上就是有关作用域的内容，但理解作用域就要理解其他概念，比如上文中的编译器，引擎，左查询右查询等。其实最后你发现，理解了这些，作用域就水到渠成了。

参考书籍：《你不知道的JavaScript（上卷）》