You Don't Know JS: Scope & Closures (第一章：什么是Scope)

Content

1. What is Scope?
2. Lexical Scope
3. Function Vs. Block Scope
4. Hoisting
5. Scope Closures

Appendix:

1. Dynamic Scope
2. Polyfilling Block Scope
3. Lexical-this
4. 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的几个大步骤：

1. Tokenizing/Lexing(代币／类型分析): 把a string of characters分解为有意义的小块，被成为tokens。
2. Parsing: 把tokens转化进一个嵌套元素的tree结构。集体地代表程序的语法结构。
   • tree叫做Abstract Syntax Tree(提取句法树)

   • var a = 2;
     //被分解成：
     /*
     顶层： VariableDeclaration
       子节点 Identifier: a
       子节点 AssignmentExpression: =
     　    子节点　 NumericLiteral: 2
     */

3. 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的交互。)

1. 编译器询问Scope"变量a是否存在于你的list中?"。
   • 如果是，继续;  如果否，编译器要求Scope去声明一个新的变量a
2. 编译器生产代码用于Engine在后续执行，去处理a = 2。
   1. Engine 跑起来，先询问Scope：你的当前list里面有变量a吗？
   2. 如果有，Engine使用这个变量， assignment.
   3. 如果没有，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 ); //
}

foo( 2 );

Engine: Scope，我有一个右侧查询, 引用foo，听说过它吗？

Scope: 当然，我有。Compiler在一秒前声明了它。它是函数。给你！

Engine: 太好了，