【JS】你不知道的JavaScript 笔记（一）—— 作用域与闭包 - 编译原理 - LHS - RHS - 循环与闭包 - 模块 - 词法作用域 - 动态作用域

之前看了一遍《你不知道的JavaScript（上卷）》之后感觉醍醐灌顶，过了几个月又感觉都快忘了，今天准备边二刷，边做个笔记，把书中的一些重点思想记录整理下来，方便以后复习。

今天先来复习总结第一部分：【作用域与闭包】

1. 什么是作用域

在程序语言中，存储与访问变量的能力将状态带给了程序

关于【变量存储在哪】和【程序如何找到变量】的规则被称为作用域

1.1 编译原理

任何JavaScript代码片段在执行前都要进行编译（通常就在执行前）

1. 分词/词法分析（Tokenizing/Lexing）

将由字符组成的字符串分解成（对编程语言来说）有意义的代码块，这些代码块被称为词法单元（token）

2. 解析/语法分析（Parsing）

将词法单元流（数组）转换成一个由元素逐级嵌套所组成的代表了程序语法结构的树。
这个树被称为“抽象语法树”（Abstract Syntax Tree, AST）。

3. 代码生成

将AST转换为可执行代码

1.2 JS编译原理

1. 引擎——负责JS程序的编译及执行过程
2. 编译器——负责语法分析及代码生成
3. 作用域——负责收集并维护由所有变量(标识符)组成的一系列查询，并实施一套规则，确定当前执行的代码对这些标识符的访问权限

用变量的赋值来举个例子

变量的赋值操作会执行两个动作：

1. 编译器会在当前作用域中声明一个变量（如果之前没有声明过）
2. 在运行时引擎会在作用域中查找该变量，如果能够找到就会对它赋值

① 引擎怎么查找变量

引擎通过 LHS查询与RHS查询 来查找变量

当变量出现在赋值操作的左侧时进行LHS查询（找到存储的位置并赋值），出现在右侧时进行RHS查询（找到它具体的值）

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

简单一点来记就是：【左找位置，右找值】

② LHS与RHS的练习

function foo(a){
    // 2. LHS找a的位置，给a赋值2
	var b = a; // 3. RHS找a的值  4. LHS找b的位置，给b赋a的值2
	return a + b; // 5. RHS找a的值 6. RHS找b的值
}
var c = foo(2) // 1. RHS找foo的值 7. LHS找c的位置，给c赋值foo(2)的值4

③ BB几句

这里的LHS和RHS让我想起了getter和setter
LHS相当于是setter，找到它的位置，并给它赋值
RHS相当于是getter，找到它的值

1.3 作用域链

发生作用域嵌套时，在当前作用域中无法找到某个变量时，引擎就会在外层嵌套的作用域中继续查找，直到找到该变量，或抵达最外层的作用域（也就是全局作用域）为止

1.4 RHS与LHS找不到的情况

如果RHS查询在所有嵌套的作用域中遍寻不到所需的变量，引擎就会抛出ReferenceError异常。

当引擎执行LHS查询时，如果在顶层（全局作用域）中也无法找到目标变量，全局作用域中就会创建一个具有该名称的变量，并将其返还给引擎

在严格模式中LHS查询失败时，并不会创建并返回一个全局变量，引擎会抛出同RHS查询失败时类似的ReferenceError异常

1.5 总结

1. 作用域是一套规则，用于确定在何处以及如何查找变量（标识符）

2. 如果查找的目的是对变量进行赋值，那么就会使用LHS查询；
   如果目的是获取变量的值，就会使用RHS查询

3. LHS和RHS查询都会在当前执行作用域中开始，沿着作用域一直找到全局作用域

4. LHS找不到不报错，RHS找不到会报错

2. JS作用域

2.1 词法作用域

作用域共有两种主要的工作模型：词法作用域与动态作用域
JS采用的是词法作用域

词法作用域就是定义在词法阶段的作用域。

词法作用域是由你在写代码时将变量和块作用域写在哪里来决定的，因此当词法分析器处理代码时会保持作用域不变。

看下面的作用域气泡，

❶ 包含着整个全局作用域，其中只有一个标识符：foo
❷ 包含着foo所创建的作用域，其中有三个标识符：a、bar 和 b
❸ 包含着bar所创建的作用域，其中只有一个标识符：c

作用域气泡的结构和互相之间的位置关系给引擎提供了足够的位置信息，引擎用这些信息来查找标识符的位置。
作用域查找会在找到第一个匹配的标识符时停止。

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

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

2.2 函数作用域

函数作用域的含义是指，属于这个函数的全部变量都可以在整个函数的范围内使用及复用（事实上在嵌套的作用域中也可以使用）

函数作用域的好处是可以隐藏内部实现 ，外部作用域无法访问包装函数内部的任何内容

关于函数声明与函数表达式

如果function是声明中的第一个词，那么这就是一个函数声明，否则就是一个函数表达式

立即执行函数表达式（IIFE）

(function foo(){
   //...})()

(function(){
   //...}())

(function IIFE(global){
   //...})(window)

2.3 块级作用域

ES6用let和const声明的变量具有块级作用域

try/catch中的块级作用域

try/catch的catch分句会创建一个块作用域，其中声明的变量仅在catch内部有效。

2.4 总结

任何声明在某个作用域内的变量，都将附属于这个作用域

3. 变量提升

编译阶段的一部分工作就是找到所有的声明，并用合适的作用域将它们关联起来。

包括变量和函数在内的所有声明都会在任何代码被执行前首先被处理

函数的提升是先于变量的

声明本身会被提升，而包括函数表达式的赋值在内的赋值操作不会提升

4. 作用域闭包

闭包是基于词法作用域书写代码时所产生的自然结果

当函数可以记住并访问所在的词法作用域时，就产生了闭包，即使函数是在当前词法作用域之外执行

换句话说

变量的查找，是在函数定义的地方，向上级作用域查找，而不是在执行的地方

看一个例子【函数作为返回值】