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

文章目录

  • 1. 什么是作用域
    • 1.1 编译原理
    • 1.2 JS编译原理
      • ① 引擎怎么查找变量
      • ② LHS与RHS的练习
      • ③ BB几句
    • 1.3 作用域链
    • 1.4 RHS与LHS找不到的情况
    • 1.5 总结
  • 2. JS作用域
    • 2.1 词法作用域
    • 2.2 函数作用域
      • 关于函数声明与函数表达式
      • 立即执行函数表达式(`IIFE`)
    • 2.3 块级作用域
      • try/catch中的块级作用域
    • 2.4 总结
  • 3. 变量提升
  • 4. 作用域闭包
    • 练习
    • 闭包在实例开发中的应用
    • 拓展 for循环与闭包
    • 总结
  • 5. 闭包在实际开发中的作用:隐藏数据
    • 例子
    • 模块
    • 总结
  • 6. 动态作用域
    • 拓展 this词法

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

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

1. 什么是作用域

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

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

1.1 编译原理

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

  1. 分词/词法分析(Tokenizing/Lexing

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

  1. 解析/语法分析(Parsing

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

  1. 代码生成

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查询时,如果在顶层(全局作用域)中也无法找到目标变量,全局作用域中就会创建一个具有该名称的变量,并将其返还给引擎

【JS】你不知道的JavaScript 笔记(一)—— 作用域与闭包 - 编译原理 - LHS - RHS - 循环与闭包 - 模块 - 词法作用域 - 动态作用域_第1张图片

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

1.5 总结

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

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

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

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

2. JS作用域

2.1 词法作用域

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

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

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

看下面的作用域气泡,
【JS】你不知道的JavaScript 笔记(一)—— 作用域与闭包 - 编译原理 - LHS - RHS - 循环与闭包 - 模块 - 词法作用域 - 动态作用域_第2张图片

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

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

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

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

2.2 函数作用域

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

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

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

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

立即执行函数表达式(IIFE

(

你可能感兴趣的:(JavaScript,javascript)