第1章:作用域是什么
- 我们通过
var
声明变量时,是否考虑过这些问题:- 这些变量都存储在哪里?
- 程序用到它们时,又是怎么找到它们的?
- 而答案就是:不仅仅是JavaScript,任何编程语言都会设计一套良好的规则来存取变量,而这套规则就叫做 作用域。
1.1 编译原理
- 虽然和静态语言(比如Java)不同,JavaScript是“解释性”的动态语言。
- 但实际上,JavaScript代码在运行之前也是需要编译的,并且JavaScript引擎编译的步骤,和传统的编译语言非常相似,大致有以下三大步骤:
第1步:分词/词法分析(Tokenizing/Lexing)
- 任何
.js
文件在解析前,对于JS引擎而言都是一大段文本,不能直接运行。所以当务之急,就是将文本字符串“大卸八块”般的进行分解。 - 词法分析就是 将文本内容分解成有意义的词法字符串(token) 。
- 比如
var a = 2;
最终会分解成词法字符串数组,得到 [var
、a
、=
、2
、;
],而多余的空格则是无意义的。
第2步:解析/语法分析(Parsing)
- 语法分析则是 将词法字符串数组转换成 “抽象语法树”(Abstract Syntax Tree,AST)
- 比如代码
var a = 2;
会生成以下具有层次结构的对象/*变量声明的对象*/ VariableDeclaration : { /*变量名为 a*/ Identifier : a, /*变量赋值表达式*/ AssignmentExpression : { /*数值类型为 2*/ NumericLiteral : 2 } }
第3步:代码生成
- 最后一步就是生成代码, 将AST转换为可执行的机器指令 。
- 比如代码
var a = 2;
会创建一个变量a
,并为其分配内存,然后将值2
存进这个变量。
1.2 理解作用域
原书将引擎、编译器以及作用域模拟成三个演员,用来说明在执行一段代码时,三者分别负责的工作。但我稍微做一些改动,将作用域比喻成一个记录清单。
- 执行JS代码依赖三个东西:
-
引擎
:负责JS代码的编译和执行 -
编译器
:在引擎工作前,负责语法分析和代码生成 -
作用域
:一个具有严格的规则,专门负责收集并维护所有变量的清单列表,通过它来存取变量
-
- 阅读代码
var a = 2;
其实访问了两次作用域,一个是 在编译器编译时检查变量声明,一个是 引擎运行时检查使用:- 如上面所说的,第1步编译器会进行词法分析,第2步将词法单元解析成一个树结构的对象;
- 在第3步生成代码时,编译器会去查找作用域,检查 是否存在同名的变量,如果没有则声明一个新的变量并赋值 ;
- 最后引擎运行代码时,会再次通过作用域 检查 是否存在同名的变量,如果有则直接 使用,没有则继续向上查找
- 引擎执行代码到作用域查找变量,分为两种类型:RHS查询 和 LHS查询:
- “L(left)”和“R(right)”分别代表变量处于表达式的左边还是右边;
- RHS查询就是查找变量,可理解成retrieve his source value(找到它源值)。比如
console.log(a)
就是RHS查询,找到变量a
的值传递给console.log()
; - LHS查询则是查找变量的容器对其进行赋值。比如
var a = 2;
就是LHS查询,找到变量a
并为它赋值= 2
;
- 我们尝试用RHS查询和LHS查询的思维来阅读JS代码:
我们都知道function foo(a){ console.log(a); } foo(2);
function
声明函数的方式等同于,声明一个变量并为其赋值一个执行方法体:var foo = function(a){ console.log(a); } foo(2);
-
var foo = function()
这是一个LHS查询:声明foo
变量并为其赋值一个方法; -
foo(2)
属于RHS查询:找到foo
变量的值并执行它 - 进到
foo
方法体中,实际上这里隐藏了一句代码a = 2;
将传递的值赋值给形参 -
console.log(a)
是RHS查询:找到a
的值,传递给console.log(...)
- 值得一提的是,
console.log()
本身也属于RHS查询,会去找寻log()
方法的引用并执行它
-
1.3 作用域嵌套
- 不管是RHS查询还是LHS查询都从当前作用域开始,如果当前作用域无法找到变量时,引擎会转移到外层作用域中继续查找,直至转移到最顶层的作用域,也就是全局作用域。
- 举例:
在function foo(a){ console.log(a + b); } var b = 2; foo(2);
foo
方法体中,变量b
在foo
的作用域中找不到,将会到外层的全局作用域查找,最后输出4
1.4 异常
- 之所以 区分RHS和LHS,是因为当查找到未声明的变量时,这两种查询的行为是不一样的:
- 如前文提到的,LHS查询失败时会在全局作用域创建一个同名的变量;
- 而RHS查询失败时,则会抛出 ReferenceError异常;另一种情况是,查找到了变量,但是尝试对这个变量的值做不合理的操作(比如对一个非函数的变量进行调用),则抛出TypeError异常
- 总而言之,RererenceError异常是作用域判别失败相关的, TypeError异常 则代表作用域判别成功了,但对结果的操作是非法或不合理的
1.5 小结
- 作用域是一套存取变量的规则;
- 在代码执行前,会先由编译器进行编译,JavaScript引擎在执行代码时会进行LHS查询和RHS查询:
-
LHS查询是对变量进行赋值,其中
=
操作符或者调用函数时传参的操作,都会导致相关作用域的赋值操作; - RHS查询是对变量的值进行查找;
-
LHS查询是对变量进行赋值,其中
- LHS和RHS查询都会从当前执行作用域开始,如果当前作用域找不到,就会往上级作用域继续查找,每次上升一级作用域,直至到顶级的全局作用域
- 不成功的RHS查询会抛出Reference异常,而不成功的LHS查询会自动式地创建一个全局变量