我是三鉆，一個在《技術銀河》中等你們一起來終生漂泊學習，

點贊是力量，關注是認可，評論是關愛！下期再見 👋！

這個筆記是基于 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 總體上屬于背景關系無關文法，其中的運算式部分大部分屬于正則文法，但是這里面是有兩個特例的：

JavaScript 的運算式里面有新加一個** 運算子，** 表示乘方
- 乘方運算子其實是右結合的，比如說 2 ** 1 ** 2 結果是 2
- 這里是因為 1 ** 2 是先計算的，1 的 2 次方是 1，然后 2 的 1 次方是2，所以最后結果是 2 而不是 4
- 所以因為它是右結合的，就不是一個正則文法
- 如果 if 這些判斷加入的話，就更加不是正則文法了
比如說 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）

我們對每一個層級的講解方式都會有一個，比較固定的結構，對每一個層級來說我們時以語法作為線索，但是實際上除了語法，重點講的是語意和進行時，

所謂 “語意” 就是在實行上在用戶使用的時候是什么樣子的，前端工程師最關心的就是，我們寫什么樣的語法，最后變成用戶的電腦上運行時什么樣子的，這是我們的變成程序，

而中間連接語法運行時，正是這個語言的語意，我們通過一定的語法表達一定的語意，最后改變了運行時的狀態，

JavaScript 語言通識 — 重學 JavaScript