JS入门难点解析3-作用域

（注1：如果有问题欢迎留言探讨，一起学习！转载请注明出处，喜欢可以点个赞哦！）
（注2：更多内容请查看我的目录。）

1. 简介

在本系列的前一篇文章JS入门难点解析2-JS的变量提升和函数提升中，我们已经讨论过。之所以不说JS需要编译，只是它不像其他编译语言一样需要翻译成等价的另一种语言。但是仍然需要进行语法分析和代码生成，并且通常是立即执行。而且，JS的变量提升和函数提升就发生在编译阶段。

那么，在这里我们来思考一下，这些变量在哪里?换句话说，它们储存在哪里?最重要的是，程序需要时如何找到它们?要解决这个问题，我们需要一套规则来存储变量，并且之后可以方便地找到这些变量。这套规则被称为作用域。

2. 引擎，编译，作用域

2.1 概念介绍

我们会在今后对引擎与编译知识做深度探讨，但在此处，只需要理解其概念与作用即可。如下：

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

2.2 三者的关系

我们用一段代码来揭示三者的关系。

var a = 2;

这段代码是不是比你想的还要简单，仅仅是在声明一个变量a的同时为其赋值2。那么，引擎和编译器是如何处理这段代码的呢？

事实上编译器会进行如下处理：

1. 遇到 var a，编译器会询问作用域是否已经有一个该名称的变量存在于同一个作用域的集合中。如果是，编译器会忽略该声明，继续进行编译;否则它会要求作用域在当前作用域的集合中声明一个新的变量，并命名为 a。
2. 接下来编译器会为引擎生成运行时所需的代码，这些代码被用来处理 a = 2 这个赋值操作。引擎运行时会首先询问作用域，在当前的作用域集合中是否存在一个叫作 a 的变量。如果是，引擎就会使用这个变量;如果否，引擎会继续查找该变量。
   如果引擎最终找到了 a 变量，就会将 2 赋值给它。否则引擎就会举手示意并抛出一个异常!

总结:变量的赋值操作会执行两个动作，首先编译器会在当前作用域中声明一个变量(如果之前没有声明过)，然后在运行时引擎会在作用域链中查找该变量，如果能够找到就会对它赋值。

编译器在编译过程的第二步中生成了代码，引擎执行它时，会通过查找变量 a 来判断它是 否已声明过。查找的过程由作用域进行协助，但是引擎执行怎样的查找，会影响最终的查找结果。那么引擎如何进行查询呢？

3. LHS和RHS

引擎的查询方式有两种，即LHS和RHS。变量出现在赋值操作的左侧时进行 LHS 查询，出现在右侧时进行 RHS 查询。讲得更准确一点，RHS 查询与简单地查找某个变量的值别无二致，而 LHS 查询则是试图找到变量的容器本身，从而可以对其赋值。从这个角度说，RHS 并不是真正意义上的“赋值操作的右侧”，更准确地说是“非左侧”。对于此处的“var a = 2;”变量a出现在左侧，所以是LHS查询。

其实这样说很是笼统，读者对赋值的理解也可能局限于“=”的左右侧而已。我们不妨换个角度来理解。还记得，前面我们说到，变量最重要的两点就是存储和引用。那么代码中出现变量时，如果目的是要进行存储，也就是我们关心的是要找到变量的容器本身，来进行不同数据的存储赋值操作，而不关心现在这个容器里面存的时候是什么，就会用到LHS。而如果我们的目的只是拿这个变量来用，也就是只关心这个变量存储的内容是啥，而不需要关心这个变量存在哪个容器，那么就会用到RHS。

4. 查询与作用域链(作用域链会在今后详细解读)

事实上，查找的过程并不仅限于查找开始时所处的当前执行作用域。当一个块或函数嵌套在另一个块或函数中时，就发生了作用域的嵌套。因此，在当前作用域中无法找到某个变量时，引擎就会在外层嵌套的作用域中继续查找，直到找到该变量， 或抵达最外层的作用域(也就是全局作用域)为止。但是如果对变量的查询如果是以查找不到的结果终止时，LHS和RHS的表现是不同的。

1. 如果 RHS 查询在所有嵌套的作用域中遍寻不到所需的变量，引擎就会抛出 ReferenceError 异常。
2. 当引擎执行 LHS 查询时，如果在顶层(全局作用域)中也无法找到目标变量，
   全局作用域中就会创建一个具有该名称的变量，并将其返还给引擎，前提是程序运行在非 “严格模式”下。在 严格模式中 LHS 查询失败时，并不会创建并返回一个全局变量，引擎会抛出同 RHS 查询 失败时类似的 ReferenceError 异常。

看到这里，我们就能理解，为什么在函数内部不用var 声明变量而直接赋值时，为什么该变量会成为一个全局变量的原因了。

如果 RHS 查询找到了一个变量，但是你尝试对这个变量的值进行不合理的操作， 比如试图对一个非函数类型的值进行函数调用，或着引用 null 或 undefined 类型的值中的属性，那么引擎会抛出另外一种类型的异常，叫作 TypeError。

ReferenceError 同作用域判别失败相关，而 TypeError 则代表作用域判别成功了，但是对结果的操作是非法或不合理的。

5. 词法作用域与动态作用域

我们来看一段代码：

var value = 1;
function foo() {
    console.log(value);
}
function bar() {
    var value = 2;
    foo();
}
bar(); //打印出来的是什么？

在揭晓答案之前，我们来说下作用域的两个概念。

1. 词法作用域
   也叫静态作用域，意味着作用域是由书写代码时函数声明的位置来决定的。编译的词法分析阶段基本能够知道全部标识符在哪里以及是如何声明的，从而能够预测在执行过程中如何对它们进行查找。
2. 动态作用域
   函数的作用域是在函数调用的时候才决定的。

那么，JavaScript到底采用的是哪种作用域呢？

1. 假设JavaScript采用静态作用域，让我们分析下执行过程：
   执行 foo 函数，先从 foo 函数内部查找是否有局部变量 value，如果没有，就根据书写的位置，查找上面一层的代码，也就是 value 等于 1，所以结果会打印 1。
2. 假设JavaScript采用动态作用域，让我们分析下执行过程：
   执行 foo 函数，依然是从 foo 函数内部查找是否有局部变量 value。如果没有，就从调用函数的作用域，也就是 bar 函数内部查找 value 变量，所以结果会打印 2。

事实上，JavaScript采用的是词法作用域，所以这个例子的结果是 1。

参考

JavaScript深入之词法作用域和动态作用域
JS入门难点解析2-JS的变量提升和函数提升
BOOK-《JavaScript高级程序设计（第3版）》
BOOK-《你不知道的JavaScript》 第1部分