【你不知道的JavaScript•上卷】（一）作用域与词法作用域

（一）作用域是什么？

1. JavaScript代码的执行过程

JavaScript代码的整个执行过程，分为两个阶段，代码编译阶段与代码执行阶段。

（1）编译阶段由编译器完成，将代码翻译成可执行代码，这个阶段作用域规则会确定，编译阶段经历以下三个步骤：

• 分词/词法分析：将由字符组成的字符串分解成（对编程语言来说）有意义的代码块，这些代码块被称为词法单元（token）;
• 解析/语法分析：将词法单元流（数组）转换成一个由元素逐级嵌套所组成的代表了程序语法结构的树——“抽象语法树”（AST）；
• 代码生成：将AST 转换为可执行代码的过程称被称为代码生成。

（2）执行阶段由引擎完成，主要任务是执行可执行代码，执行上下文在这个阶段创建。

JavaScript代码的执行过程

JavaScript代码执行过程中的“演员”：

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

2. 作用域与作用域查询

作用域是一套规则，用于确定在何处以及如何查找变量（标识符），也就是说这套规则用来管理引擎如何在当前作用域以及嵌套的子作用域中根据标识符名称进行变量查找；作用域规则是在代码的编译阶段确定的。

var a = 2;

// 变量的赋值会执行两个动作：
// ①编译器会在当前作用域中声明一个变量（如果之前没有声明过）；
// ②在运行时引擎会在作用域中查找该变量，如果能够找到就对它进行赋值。

引擎在执行由编译阶段生成的可执行代码时，引擎会为变量（标识符）进行两类查询：

• LHS查询-- 查找的目的是对变量进行赋值（常见的是函数定义，函数传参，变量赋值等）
• RHS查询-- 目的是获取变量的值（常见的是函数调用）

LHS 和RHS 查询都会在当前执行作用域中开始，如果在当前作用域中没有找到所需的标识符，就会向上级作用域继续查找目标标识符，这样每次上升一级作用域，最后抵达全局作用域（顶层），无论找到或没找到都将停止。作用域查找会在找到第一个匹配的标识符时停止。

在变量还没有声明（在任何作用域中都无法找到该变量） 的情况下，LHS 和RHS 查询的行为是不一样的：

（1）不成功的 LHS查询：

• 非严格模式下：如果在顶层（全局作用域）中也无法找到目标变量，全局作用域中就会创建一个具有该名称的变量，并将其返还给引擎;
• 严格模式下：抛出ReferenceError 异常。

function foo(a) {
    b = a; // 在全局作用域中未找到变量 b，则LHS查询会在全局作用域中创建该变量
    console.log( a + b ); // 4
}
foo( 2 );
console.log(b); // 2，调用foo()函数之后，b 已成为全局变量

（2）不成功的 RHS查询：

• 未找到变量时，引用会导致抛出ReferenceError 异常；
• 找到了一个变量，但是尝试对这个变量的值进行不合理的操作时，会抛出TypeError，比如试图对一个非函数类型的值进行函数调用，或着引用null或undefined类型的值中的属性时，引擎就会抛出TypeError异常。

function foo(a) {
    console.log( a + b ); // Uncaught ReferenceError: b is not defined
    b = a;
}
foo( 2 );

以上代码中，第一次对b进行RHS查询时是无法找到该变量的。也就是说，这是一个“未声明”的变量，因为在任何相关的作用域中都无法找到它。如果RHS查询在所有嵌套的作用域中遍寻不到所需的变量，引擎就会抛出ReferenceError异常。

（二）词法作用域

词法作用域就是定义在词法阶段的作用域。换句话说，词法作用域是由你在写代码时将变量和块作用域写在哪里来决定的。

无论函数在哪里被调用，也无论它如何被调用，它的词法作用域都只由函数被声明时所处的位置决定。

欺骗词法

JavaScript 中有两种机制来实现：在运行时来“修 改”（也可以说欺骗）词法作用域，欺骗词法作用域会导致性能下降，所以不要使用eval和with。

（1）eval

eval() 函数可以接受一个字符串为参数，对一段包含一个或多个声明的“代码”字符串进行演算，并借此来修改已经存在的词法作用域（在运行时）；

function foo(str, a) {
    eval( str ); // 欺骗！
    console.log( a, b );
}
var b = 2;
foo( "var b = 3;", 1 ); // 1, 3

// 上面代码中，eval()调用中的"var b = 3;"这段代码会被当作本来就在那里一样来处理。
// 由于那段代 码声明了一个新的变量b，因此它对已经存在的foo()的词法作用域进行了修改。
// 这段代码实际上在 foo() 内部创建了一个变量 b，并遮蔽 了外部（全局）作用域中的同名变量。

但在严格模式的程序中，eval()在运行时有其自己的词法作用域，意味着其中的声明无法修改所在的作用域。

function foo(str) {
    "use strict";
    eval( str );
    console.log( a ); // ReferenceError: a is not defined
}
foo( "var a = 2" );

（2）with

with 通常被当作重复引用同一个对象中的多个属性的快捷方式，可以不需要重复引用对象本身。

with 通过将一个对象的引用当作作用域来处理，将对象的属性当作作用域中的标识符来处理，从而创建了一个新的词法作用域（在运行时）。

尽管with 块可以将一个对象处理为词法作用域，但是这个块内部正常的var声明并不会被限制在这个块的作用域中，而是被添加到with 所处的函数作用域中。

function foo(obj) {
    with (obj) {
        a = 2;
    }
}
var o1 = {a: 3};
var o2 = {b: 3};

// 将 o1 传递进去，a＝2 赋值操作找到了 o1.a 并将 2 赋值给它
foo( o1 );
console.log( o1.a ); // 2

// 当 o2 传递进去，o2 并没有 a 属性，因此不会创建这个属性， o2.a 保持 undefined
// 此时，a = 2 赋值操作创建了一个全局的变量 a
foo( o2 );
console.log( o2.a ); // undefined
console.log( a ); // 2——不好，a 被泄漏到全局作用域上了！

• eval() 函数如果接受了含有一个或多个声明的代码，就会修改其所处的词法作用域；
• with 声明实际上是根据你传递给它的对象凭空创建了一个全新的词法作用域。