You Don't Know JS: Scope & Closures (第一章:什么是Scope)
Content
- What is Scope?
- Lexical Scope
- Function Vs. Block Scope
- Hoisting
- Scope Closures
Appendix:
- Dynamic Scope
- Polyfilling Block Scope
- Lexical-this
- Thank You's
Chapter1: What is Scope?
In fact, the ability to store values and pull values out of variables is what gives a program state.
背后的问题:
变量储存在哪?
当需要用到它们,程序怎样找到它们?
回答:
需要a well-defined set of rules: Scope.
但是Scope在哪里和如何得到设置get set?
Compiler Theory
JS是编译后的语言。
Compilation的几个大步骤:
- Tokenizing/Lexing(代币/类型分析): 把a string of characters分解为有意义的小块,被成为tokens。
- Parsing: 把tokens转化进一个嵌套元素的tree结构。集体地代表程序的语法结构。
- tree叫做Abstract Syntax Tree(提取句法树)
-
var a = 2; //被分解成: /* 顶层: VariableDeclaration 子节点 Identifier: a
子节点 AssignmentExpression: =
子节点 NumericLiteral: 2 */
- Code-Generation: 把这个AST转化为可执行的代码。(根据不同语言,有区别)。
- 转化为机器指令,目的是来创建一个变量a, 并储存一个value到a.
当然JS引擎更复杂。编译时间,在许多情况下,仅仅耗时微秒或更少。并立即在编译后执行代码。
Understanding Scope
学习理解Scope,可以比喻成,进程的一场谈话。
var a = '123'
The Cast 全体演员
- Engine 响应从开始到结束编译,并执行JS程序。
- Compiler 编译器。处理所有脏活,包括parsing and code-generation.
- Scope 收集和保存一个名单。名单上包括所有的变量identifiers,并强迫实施一个严格的规则:这些identifiers如何存取到 currently executing code。
Back & Forth
Engine看2个独立的声明。1个是在编译期间,编译器处理。另一个是在执行期间,引擎处理。
首先,编译器Tokening and Lexing,
然后, Parsing 代码到AST树,
最后, Code-Generation。(用到Scope和Engine的交互。)
- 编译器询问Scope"变量a是否存在于你的list中?"。
- 如果是,继续; 如果否,编译器要求Scope去声明一个新的变量a
- 编译器生产代码用于Engine在后续执行,去处理a = 2。
- Engine 跑起来,先询问Scope:你的当前list里面有变量a吗?
- 如果有,Engine使用这个变量, assignment.
- 如果没有,Engine去其他地方查看(查看嵌套的Scope部分)
总结:
编译器先声明变量,然后Engine在Scope中查询这个变量,如果发现就分配它。
首先Compiler Speak
然后Engine/Scope Conversation
Engine执行代码,是在编译器生产后的第2步,Engine查询变量a是否已被声明。这个查询是咨询Scope。
Engine执行的查询的类型(LHS和RHS),影响查询的结果outcome。
本例子:var a = '123';
Engine将执行一个“Left-hand Side”查询,查询内容是变量a。
还有"Right-hand Side",准确的描述是:非左侧查询。
Side是指分配符号an assignment operation的左右两边。
如: console.log(a); 就是非左侧查询。
其实LHS和RHS只是涉及是否assign的一种称呼。
"who's the target of the assignment (LHS)" and "who's the source of the assignment (RHS)".
(这两个概念有什么用??见后,ES6以后区别不明显了。)
Engine和Scope的对话:
function foo(a) { console.log( a ); // 2 } foo( 2 );
Engine: Scope,我有一个右侧查询, 引用foo,听说过它吗?
Scope: 当然,我有。Compiler在一秒前声明了它。它是函数。给你!
Engine: 太好了, 🙏。我执行foo.
Engine: Scope! 我有一个左侧查询,引用a,听说过它吗?
Scope:当然,我有。Compiler声明它作为一个参数给foo。给你!
Engine:谢谢。现在分配2给a
Engine:Scope不好意思,又打扰你了。 我有一个右侧查询, 引用console, 听说过它吗?
Scope:当然!它是Build-in, 给你!
Engine:太好了! 查找log(..), ok,它是一个函数方法
Engine: Scope! 我又有一个右侧查询,引用a。 我记得它,这是一次2次核对。
Scope: 正确!Engine!它没有改变。给你!
Engine: Cool!传递a的value, 是2,放入log(..)
Quiz
function foo(a) { var b = a; return a + b; } var c = foo( 2 );
-
Identify all the LHS look-ups (there are 3!).
-
c = ..
, -
a = 2
(implicit param assignment) , -
b = ..
-
-
Identify all the RHS look-ups (there are 4!).
-
foo(2..
, -
= a;
, -
a + ..
and.. + b
-
结论:LHS 3, RHS4
Nested Scope
Scope是一条法则: 用变量的识别符号name查询它们。
就像块/函数可以被嵌套在其他块/函数内一样,作用域也可以被嵌套在其他作用域内。
如果一个变量在当前作用域内找不到,Engine就会咨询下一个outer containing scope,并继续直到发现或到达最外层作用域。
Errors
- ReferenceError: Scope resolution失败。
- TypeError: Scope resolution是成功的,但有非法/不可能行为存在试图反对这个结果。
为什么我们起了2个名字,LHS, RHS?
在变量还没有被声明的时候(或者说询问任何作用域都查找到),这2类look-ups查询的行为是不同的!
- RHS右侧查询,在当前作用域和嵌套作用域都没找到后,会抛出❌ReferenceERror
- 在ES5之前,没有严格模式,所以LHS没有找到一个变量后,当到达全局作用域后,会创建一个全局变量。
- 严格模式下,则会报错❌ ReferenceError。
- ⚠️:这个区别在ES5后,非严格模式也会报错了❌!!
- 如果一个变量在RHS查询被发现,但你用它执行的某些操作(比如:分配一个非法的值),Engine会抛出一个错误❌,TypeError
Review(TL;DR)
涉及分配的就是LHS, 只涉及查询值的就是RHS
LHS:
- = opertaor
- 传递arguments给函数parameters
JS Engine首先在执行代码前编译代码,分割声明var a = 2;成2部分:
- var a, 在Scopen内声明它。这步在最开始执行。
- a = 2, 查询变量2,并分配value。