我是三钻，一个在《技术银河》中等你们一起来终生漂泊学习。

点赞是力量，关注是认可，评论是关爱！下期再见 👋！



这个笔记是基于 Winter 老师的 《重学前端》的内容总结而得。



在这个重学系列的课程中，都会假设大家对 JavaScript、CSS、HTML 有了一定的了解。而这个重学的过程其实是帮助我们在这些过去的知识里面建立一个新的秩序，也就是建立知识体系的过程。在重学 JavaScript 的过程将会带着大家以 JavaScript 的语法为线索，从细到粗的跟大家完整学习一遍 JavaScript 的语言知识。





语言按语法分类

首先这里我们讲一讲泛用的语言的分类学，在我们平时说话，我们讲的是中文。当我们去国外留学或者旅游的时候我们都会需要讲英文。不知道大家有没有这种经历，在国外的时候因为英文不是很好，我们会把关键词凑起来这么一说，然后语法也不对，但是老外也听懂了。比如说 “很久不见”，我们就会说 "long time no see"，然后老外还觉得挺好用的，最后他们也把这个加到语言体系里面。



这类的语言有一个特点，就是它的语法没有一个严格的定义，所以我们叫它做 “非形式化语言”，典型的代表就是我们平时说的这些。



在计算机里面，大部分的语言都是 “形式语言” —— 形式语言它的特性是有一个形式化定义，它是非常的严谨严格。



然后在形式语言里面也是有分类的，这里给大家讲一下其中一种就是 “乔姆斯基谱系”。



乔姆斯基谱系：是计算机科学中刻画形式文法表达能力的一个分类谱系，是由诺姆·乔姆斯基于 1956 年提出的。它包括四个层次.

• 非形式化语言

• 中文，英文

• 形式化语言 （乔姆斯基谱系）

• 0-型：无限制文法 —— 只要定义清楚了语言是什么样的

• 1-型：上下文相关文法 —— 同样的一个词、句的组合，它的上文、下文和内容相关的

• 2-型：上下文无关文法 —— 同样一个表达，不管放到哪里都是一样的意思

• 3-型：正则文法 —— 能够被正则表达式去描述的一种文法

在乔姆斯基谱系里面 0123 是一种包含关系，就是说一个上下文相关文法，它一定也属于 0-型，但是反过来就不一定了。





什么是产生式？（BNF）



• 产生式： 在计算机中指 Tiger 编译器将源程序经过词法分析（Lexical Analysis）和语法分析（Syntax Analysis）后得到的一系列符合文法规则（Backus-Naur Form，BNF）的语句

• 巴科斯诺尔范式：即巴科斯范式（英语：Backus Normal Form，缩写为 BNF）是一种用于表示上下文无关文法的语言，上下文无关文法描述了一类形式语言。它是由约翰·巴科斯（John Backus）和彼得·诺尔（Peter Naur）首先引入的用来描述计算机语言语法的符号集。

• 终结符： 最终在代码中出现的字符（ https://zh.wikipedia.org/wiki/ 終結符與非終結符)



• 用尖括号（<, >）括起来的名称来表示语法结构名

• 语法结构分成基础结构和需要用其他语法结构定义的复合结构

• 基础结构称终结符

• 复合结构称非终结符

• 引号和中间的字符表示终结符

• 可以有括号

• * 表示重复多次

• | 表示 “或”

• + 表示至少一次



案例：



我们来用 BNF 来表述一下大家比较熟悉的四则运算。



• 四则远算是：1 + 2 * 3

• 这里面的总结符：

• Number

• +、-、*、/

• 非终结符

• MultiplicativeExpression

• AdditiveExpression



小时候我们学的四则运算是加减乘除，实际上它是有一个优先级的关系的。我们可以理解为一个 1+2x3的连加法当中，可以拆分成一个 1和 2x3组成的。那么 2x3 是它的子结构，然后 2 和 3，就是这个结构中的 Number，然后中间就是运算符 *。



所以用 BNF 去描述这个远算的时候，首先我们会定义一个加法表达式，格式就是：



• 乘法表达式的列表 或

• 加法表达式 + 乘法表达式 或

• 加法表达式 - 乘法表达式



因为 BNF 是可以递归的，所以在定义表达式的时候，可以使用自身的表达式。



那么乘法也是类似，只不过那加法中乘法的表达式换成了 Number 就可以了：



• Number 或

• 乘法表达式 * Number 或

• 乘法表达式 / Number



最后我们看看用代码是怎么写的：



<MultiplicativeExpression>::=<Number> |
	<MultiplicativeExpression> "*" <Number> |
	<MultiplicativeExpression> "/" <Number> |
<AddtiveExpression>::=<MultiplicativeExpression> |
	<AddtiveExpression> "+" <MultiplicativeExpression> |
	<AddtiveExpression> "-" <MultiplicativeExpression> |





深入了解产生式



这里我们来尝试通过产生式，来深入理解一下前面讲到的乔姆斯基谱系。



终结符： 最终在代码中出现的字符（ https://zh.wikipedia.org/wiki/ 終結符與非終結符)



• 0-型：无限制文法

+ 产生式：?::=?

+ 在无限制文法当中是可以产生多个非终结符

+ 所以在无限制文法里面是可以随便写

• 1-型：上下文相关文法

+ 产生式：? <A> ?::=? <B> ?

+ 对产生的书写做出了一定的限制

+ 可以在左边右边的?中写多个非终结符

+ 但是可变化的只能是前面与后面，并且是有关系的

+ 而中间一定是有一个固定的不变的部分

+ 所以 <A> 前面的 ? 就是上文，后面的 ? 就是下文

• 2-型：上下文无关文法

+ 产生式：<A>::=?

+ 左边的 <A> 一定是一个非终结符

+ 右边的 ? 就是可以随便写，可以是一大堆终结符或者混合终结符和非终结符

• 3-型：正则文法

+ 产生式：<A>::=<A> ? ✅, <A>::=?<A> ❌

+ 正则文法式有要求的

+ 假如说正则文法式递归定义的，那么它不允许你这个定义 A 出现在尾巴上

+ 如果左边的符号 <A> ，那么右边一定要出现在产生式的最开头的

+ 根据这个规则，所有的正则文法都是可以被正则表达式来表示的



那 JavaScript 是上下文相关文法，*上下文无关文法*还是正则无关文法？



JavaScript 总体上属于上下文无关文法，其中的表达式部分大部分属于正则文法，但是这里面是有两个特例的：



1. JavaScript 的表达式里面有新加一个** 运算符，** 表示乘方

+ 乘方运算符其实是右结合的 ，比如说 2 1 2 结果是 2

+ 这里是因为 1 ** 2 是先计算的，1 的 2 次方是 1，然后 2 的 1 次方是2，所以最后结果是 2 而不是 4

+ 所以因为它是右结合的，就不是一个正则文法

+ 如果 if 这些判断加入的话，就更加不是正则文法了

1. 比如说 get

+ 如果我们在写成 get a {return 1} 那 get 就类似关键字的东西

+ 但是如果我们在 get 后面加入 :，那 get 本身就是属性名了



所以如果我们严格按照乔姆斯基谱系来理解，那么 JavaScript 是属于上下文相关文法。在 JavaScript 引擎的实现上，可以理解为众体的编程的结构，都是一个针对上下文无关文法的，一旦遇到像 get 这样的上下文相关的地方，那么就会单独的用代码做一些特例处理。所以一般来说也就不会把 JavaScript 归类为上下文相关文法去处理。





其他产生式



除了乔姆斯基谱系可以用 BNF 来定义，其实还有很多的不同的产生式的类型。比如说后来出现的 EBNF、ABNF，都是针对 BNF 的基础上做了语法上的扩张。所以一般来说每一个语言的标准里面，都会自定义一个产生式的书写方式。



比如说 JavaScript 中也是：



AdditiveExpression:
    MultiplicativeExpression
    AdditiveExpression +
MultiplicativeExpression
    AdditiveExpression -
MultiplicativeExpression



它的开头是用缩进来表示的，就是相当于产生式左边的非终结符，非终结符之后跟着一个冒号，之后给了两个空格的缩进。然后在 JavaScript 的标准中，它的非终结符，加号、减号是用加粗的黑字体来表示终结符的。所以网上的产生式是五花八门的，只学一个 BNF 是无法读懂所有的语言的。虽然所他们都有不一样的标准和写法，但是它们所表达的意思大致上都是一样的。所以我们需要理解产生式背后的思路和原理，那么我们是可以忽略表达式上的区别的。





现代语言的分类



现代语言的特例



• C++ 中，* 可能表达乘号或者指针，具体是哪个，取决于星号前面的标识符是否被声明为类型；



• VB 中，< 可能是小于号，也可能是 XML 直接量的开始，取决于当前位置是否可以接受XML直接量；



• Python 中，行首的 tab 符和空格会根据上一行的行首空白以一定规则被处理成虚拟终结符 indent 或者 dedent；



• JavaScript 中，/ 可能是除号，也可能是正则表达式开头，处理方式类似于 VB，字符串模版中也需要特殊处理 }，还有自动插入分号规则；



## 语言的分类



形式语言 —— 用途



• 数据描述语言 —— 有些时候我们需要去存储一个粹的数据，本身是没有办法进行编程的

+ JSON, HTML, XAML, SQL, CSS

• 编程语言

+ C, C++, Java, C#, Python, Ruby, Perl, PHP, Go, Perl, Lisp, T-SQL, Clojure, Haskell, JavaScript, CoffeeScriptx



形式语言 —— 表达方式



• 声明式语言

+ JSON, HTML, XAML, SQL, CSS, Lisp, Clojure, Haskell

• 命令型语言

+ C, C++, Java, C#, Python, Ruby, Perl, JavaScript





编程语言的性质



图灵完备性



• 命令式 —— 图灵机

+ goto

+ if 和 while

• 声明式 —— lambda

+ 递归



+ 图灵完备性：在可计算性理论里，如果一系列操作数据的规则（如指令集、编程语言、细胞自动机）可以用来模拟单带图灵机，那么它是图灵完全的。这个词源于引入图灵机概念的数学家艾伦·图灵。虽然图灵机会受到储存能力的物理限制，图灵完全性通常指“具有无限存储能力的通用物理机器或编程语言”。

+ 图灵机（Turing machine）：又称确定型图灵机，是英国数学家艾伦·图灵于 1936 年提出的一种将人的计算行为抽象掉的数学逻辑机，其更抽象的意义为一种计算模型，可以看作等价于任何有限逻辑数学过程的终极强大逻辑机器。



动态与静态



• 动态：

+ 在用户的设备 / 在线服务器上运行

+ 时机：产品实际运用时

+ 术语：Runtime（运行时）

• 静态：

+ 在程序员的设配上运行

+ 时机：产品开发时

+ 术语：Compiletime（编译时）



JavaScript 这种解释执行的语言，它是没有 Compiletime 的。我们现在也会用到 Webpack 去 build 一下我们的代码，但是实际上还是没有 Compiletime 的。所以说，今天的 Runtime 和 Compiletime 的对应已经不准确了，但是我们依然会愿意沿用 Compiletime 的习惯，因为 JavaScript 它也是 “Compiletime（开发时）” 的一个时间，所以也会用 Compiletime 这个词来讲 JavaScript 里面的一些特性。



类型系统



• 动态类型系统 —— 在用户机器上可以找到的类型时

+ JavaScript就是动态类型系统

• 静态类型系统 —— 只在程序员编写代码的时候可以找到的类型时

+ C++最终编译到目标的机器的代码的时候，所有的类型信息都被丢掉了

• 半动态半静态类型系统 —— 比如 Java 一类的语言提供了反射机制

+ 在编译时主要的类型检查和类型的操作，都已经在编译时被处理掉了

+ 但是如果你想在运行时去获得类型信息，还是可以通过反射去获取的

• 强类型与弱类型 —— 说明在编程语言里类型转换发生的形式

+ 强类型： 无隐式转换（类型转化是不会默认发生的）

+ 弱类型： 有隐式转换（JavaScript 就是典型的弱类型的语言，默认吧 Number 转换成 String 类型然后相加后给你得到一个 String 类型，还有 String 和 Boolean 双等运算，会先把 Boolean 转成 Number 然后再跟 String 去做是否相同的对比）

• 复合类型

+ 结构体

+ 函数签名（包含参数类型和返回值类型两个部分）

• 子类型 —— 典型的语言就是 C++（在做类型转换的时候，会有一些默认的行为）

• 范型

+ 协变与逆变： https://jkchao.github.io/typescript-book-chinese/tips/covarianceAndContravariance.html

+ 协变例子：凡是能用范型数组 Array <Parent> 的地方都能用 Array <Child>

+ 逆变例子：凡是能用 Function <Child> 的地方，都能用 Function <Parent>





一般命令式编程语言的设计方式



一般来说我们的命令式语言可能有一些细微的结构上的不一致，但是它总体上来讲会分成5个层级。



• 原子级（Atom）—— 一个语言的最小的组成单位

+ 关键字（Identifier）

+ 字符/数字的直接量（Literal）

+ 变量名（Variables）

• 表达式（Expression）—— 原子级结构通过运算符相连接和辅助符号形成

+ 原子单位（Atom）

+ 操作符（Operator）—— 加减乘除，拼接符等等

+ 语法符（Punctuator）

• 语句（Statement）—— 表达式加上特定的标识符、关键字、符号形成一定的结构

+ 表达式（Expression）

+ 关键字（Keyword）

+ 语法符（Punctuator）

• 结构化（Structure）—— 帮助我们组织、分块、分成不同的复用结构

+ 函数（Function）

+ 类（Class）

+ 过程（Process）—— PASCAL 语言就会有 Process 的概念

+ 命名空间（Namespace）—— C++ / PHP 中就会有 Namespace 的概念

• 程序（Program）—— 管理语言模块和安装

+ 程序（Program）—— 实际执行的代码

+ 模块（Module）—— 准备好被复用的模块

+ 包（Package）

+ 库（Library）



我们对每一个层级的讲解方式都会有一个，比较固定的结构。对每一个层级来说我们时以语法作为线索，但是实际上除了语法，重点讲的是语义和进行时。



所谓 “语义” 就是在实行上在用户使用的时候是什么样子的。前端工程师最关心的就是，我们写什么样的语法，最后变成用户的电脑上运行时什么样子的，这是我们的变成过程。



而中间连接语法运行时，正是这个语言的语义。我们通过一定的语法表达一定的语义，最后改变了运行时的状态。