javascript作用域

1.作用域是什么

1. 编译原理

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

JavaScript引擎进行编译的步骤和传统的编译语言非常相似，但它不是提前编译的，编译结果也不能在分布式系统中移植。

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

• 分词/词法分析（Tokenizing/Lexing）
  这个过程会将由字符组成的字符串分解成（对编程语言来说）有意义的代码块，这些代码块被称为词法单元（ token ）。例如，考虑程序 var a = 2; 。这段程序通常会被分解成为下面这些词法单元： var 、 a 、 = 、 2 、 ; 。空格是否会被当作词法单元，取决于空格在这门语言中是否具有意义。

• 解析/语法分析(Parsing)
  这个过程是将词法单元流（数组）转换成一个由元素逐级嵌套所组成的代表了程序语法结构的树。这个树被称为“抽象语法树”（ Abstract Syntax Tree ， AST ）。 var a = 2; 的抽象语法树中可能会有一个叫作 VariableDeclaration 的顶级节点，接下来是一个叫作 Identifier （它的值是 a ）的子节点，以及一个叫作 AssignmentExpression 的子节点。 AssignmentExpression 节点有一个叫作 NumericLiteral （它的值是 2 ）的子节点。 •

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

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

2.理解作用域

• 引擎
  负责整个JavaScript程序的编译和执行过程。

• 编译器
  引擎的好朋友之一，负责语法分析和代码生成等。

• 作用域
  引擎的另一位好朋友，负责收集并维护所有声明的标识符组成的一系列查询，并实施一套非常严格的规则，确定当前执行的代码对这些标识符的访问权限。

当你看到var a = 2;这段程序时，认为这是一句声明。但引擎确不是这样处理。

编译器首先会将这段程序拆分为词法单元，然后将词法单元解析成一个树结构。但是当编译器开始进行代码生成时，对这段程序的处理会和预期有所不同。

可以用伪代码概括：“为一个变量分配内存，将其命名为a，然后将值2保存进这个变量。”然而并不完全正确。

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

1.遇到var a，编译器会询问作用域是否已经有一个该名称的变量存在于同一个作用域的集合中。如果是，编译器会忽略该声明，继续进行编译；否则它会要求作用域在当前作用域的集合中声明一个新的变量，命名为a。

2.接下来编译器会为引擎生成运行时所需代码，这段代码被用来处理a = 2这个赋值操作。引擎运行时会先询问作用域，在当前作用域集合中是否存在一个叫做a的变量。如果是引擎就使用这个变量；如果不是引擎继续查找该变量。如果引擎最终找到了该变量，就将2赋值给它，否则就抛出一个异常。

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

3.引擎查询

编译器生成代码后，引擎执行它时，会通过查找变量a来判断它是否已声明过。引擎查询分为LHS查询和RHS查询。“L”和“R”表示赋值操作的左侧和右侧。

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

console.log(a);其中对a的引用是RHS引用，这里a并没有赋予任何值。要查找并取得a的值并将值传递给console.log()
a=2;对a的引用是LHS引用，并不关心当前值是什么，只是想要为=2这个赋值操作找到一个目标。

LHS 和 RHS 的含义是“赋值操作的左侧或右侧”并不一定意味着就是“=赋值操作符的左侧或右侧”。赋值操作还有其他几种形式，因此在概念上最好将其理解为“赋值操作的目标是谁（ LHS ）”以及“谁是赋值操作的源头（ RHS ）”。

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

1. 找出所有的 LHS 查询（这里有 3 处！）
   c = ..; 、 a = 2 （隐式变量分配）、 b = ..
2. 找出所有的 RHS 查询（这里有 4 处！） foo(2..) 、 = a; 、 a .. 、 .. b

4.作用域嵌套

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

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

5.异常

区分LHS和RHS很重要，因为变量在还没有声明的情况下这两种查询行为是不一样的。

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

第一次对 b 进行 RHS 查询时是无法找到该变量的。也就是说，这是一个“未声明”的变量，因为在任何相关的作用域中都无法找到它。
如果 RHS 查询在所有嵌套的作用域中遍寻不到所需的变量，引擎就会抛出 ReferenceError 异常。值得注意的是， ReferenceError 是非常重要的异常类型。相较之下，当引擎执行 LHS 查询时，如果在顶层（全局作用域）中也无法找到目标变量，全局作用域中就会创建一个具有该名称的变量，并将其返还给引擎，前提是程序运行在非“严格模式”下。

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

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

6.小结

作用域是一套规则，用于确定在何处以及如何查找变量（标识符）。如果查找的目的是对变量进行赋值，那么就会使用 LHS 查询；如果目的是获取变量的值，就会使用 RHS 查询。赋值操作符会导致 LHS 查询。＝操作符或调用函数时传入参数的操作都会导致关联作用域的赋值操作。

JavaScript 引擎首先会在代码执行前对其进行编译，在这个过程中，像 var a = 2 这样的声明会被分解成两个独立的步骤：

1. 首先， var a 在其作用域中声明新变量。这会在最开始的阶段，也就是代码执行前进行。
2. 接下来， a = 2 会查询（ LHS 查询）变量 a 并对其进行赋值。

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

不成功的 RHS 引用会导致抛出 ReferenceError 异常。不成功的 LHS 引用会导致自动隐式地创建一个全局变量（非严格模式下），该变量使用 LHS 引用的目标作为标识符，或者抛出 ReferenceError 异常（严格模式下）。

2.词法作用域

1.词法阶段

大部分标准语言编译器的第一个工作阶段叫作词法化（也叫单词化）。

简单地说，词法作用域就是定义在词法阶段的作用域。换句话说，词法作用域是由你在写代码时将变量和块作用域写在哪里来决定的，因此当词法分析器处理代码时会保持作用域不变（大部分情况下）。

作用域查找会在找到第一个匹配的标识符时停止。在多层的嵌套作用域中可以定义同名的标识符，这叫作“遮蔽效应”（内部的标识符“遮蔽”了外部的标识符）。抛开遮蔽效应，作用域查找始终从运行时所处的最内部作用域开始，逐级向外或者说向上进行，直到遇见第一个匹配的标识符为止。

全局变量会自动成为全局对象（比如浏览器中的 window 对象）的属性，因此可以不直接通过全局对象的词法名称，而是间接地通过对全局对象属性的引用来对其进行访问。
window.a 通过这种技术可以访问那些被同名变量所遮蔽的全局变量。但非全局的变量如果被遮蔽了，无论如何都无法被访问到。
无论函数在哪里被调用，也无论它如何被调用，它的词法作用域都只由函数被声明时所处的位置决定。

2.欺骗词法

如果词法作用域完全由写代码期间函数所声明的位置来定义，怎样才能在运行时来“修改”（也可以说欺骗）词法作用域呢？ JavaScript 中有两种机制来实现这个目的。

2.1 eval

JavaScript 中的 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 ，并遮蔽了外部（全局）作用域中的同名变量。
当 console.log(..) 被执行时，会在 foo(..) 的内部同时找到 a 和 b ，但是永远也无法找到外部的 b 。因此会输出“1, 3” 而不是正常情况下会输出的“1, 2” 。

在这个例子中，为了展示的方便和简洁，我们传递进去的“代码”字符串是固定不变的。而在实际情况中，可以非常容易地根据程序逻辑动态地将字符拼接在一起之后再传递进去。 eval(..) 通常被用来执行动态创建的代码，因为像例子中这样动态地执行一段固定字符所组成的代码，并没有比直接将代码写在那里更有好处。

2.2 with

JavaScript 中另一个难以掌握（并且现在也不推荐使用）的用来欺骗词法作用域的功能是 with 关键字。可以有很多方法来解释 with ，在这里我选择从这个角度来解释它：它如何同被它所影响的词法作用域进行交互。
with 通常被当作重复引用同一个对象中的多个属性的快捷方式，可以不需要重复引用对象本身。
比如：

var obj = { a: 1, b: 2, c: 3 }; 
// 单调乏味的重复 "obj" 
obj.a = 2; 
obj.b = 3; 
obj.c = 4;

// 简单的快捷方式 
with (obj) { 
  a = 3; 
  b = 4; 
  c = 5; 
} 

//但实际上这不仅仅是为了方便地访问对象属性。
//考虑如下代码： 
function foo(obj) { 
  with (obj) { 
    a = 2; 
  } 
} 
var o1 = { a: 3 }; 
var o2 = { b: 3 }; 
foo( o1 ); 
console.log( o1.a ); // 2 
foo( o2 );
 console.log( o2.a ); // undefined 
 console.log( a ); // 2—— 不好， a 被泄漏到全局作用域上了！

这个例子中创建了 o1 和 o2 两个对象。其中一个具有 a 属性，另外一个没有。
foo(..) 函数接受一个 obj 参数，该参数是一个对象引用，并对这个对象引用执行了 with(obj) {..} 。在 with 块内部，我们写的代码看起来只是对变量 a 进行简单的词法引用，实际上就是一个 LHS 引用并将 2 赋值给它。当我们将 o1 传递进去， a ＝ 2 赋值操作找到了 o1.a 并将 2 赋值给它，这在后面的 console. log(o1.a) 中可以体现。而当 o2 传递进去， o2 并没有 a 属性，因此不会创建这个属性， o2.a 保持 undefined 。但是可以注意到一个奇怪的副作用，实际上 a = 2 赋值操作创建了一个全局变量a。

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

2.3 小结

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

JavaScript 中有两个机制可以“欺骗”词法作用域： eval(..) 和 with 。前者可以对一段包含一个或多个声明的“代码”字符串进行演算，并借此来修改已经存在的词法作用域（在运行时）。后者本质上是通过将一个对象的引用当作作用域来处理，将对象的属性当作作用域中的标识符来处理，从而创建了一个新的词法作用域（同样是在运行时）。

这两个机制的副作用是引擎无法在编译时对作用域查找进行优化，因为引擎只能谨慎地认为这样的优化是无效的。使用这其中任何一个机制都将导致代码运行变慢。不要使用它们。