抽象語法樹(Abstract Syntax Tree)

通常來講，程序中的一段源代碼在執行以前會經歷下面三個步驟
1 分詞／詞法分析
這個過程會將由字符組成的字符串分解成有意義的代碼快，這些代碼塊被稱爲詞法單元。例如 var a = 4；會被分解成 var、a、=、四、;

2 解析／語法分析
這個過程是將詞法單元流（數組）轉換成一個由元素逐級嵌套所組成的表明了程序語法結構的樹，這個樹就叫「抽象語法樹」（AST）。全稱 Abstract Syntax Tree。

3 代碼生成
將AST轉換成可執行代碼的過程稱爲代碼生成。拋開具體細節不講，簡單來講就是有某種方法能夠將var a= 4; 的AST轉化爲一組機器指令,用來建立一個叫作a的變量，並將一個值儲存在a中。

可能以上的這些聽起來有些雲裏霧裏。由於在平時寫代碼的時候，不關注這些也能寫代碼。可是多瞭解一些，就多一扇看到未知世界的窗口。你確定使用過前端的不少工具插件，webpack，eslint啥的。你知道這些工具的核心都是經過抽象語法樹這個概念來實現對代碼的檢查，分析，轉換的嗎？

抽象語法樹的定義

In computer science, an abstract syntax tree (AST), or just syntax tree, is a tree representation of the abstract syntactic structure of source code written in a programming language.

翻譯一下就是：
在計算機科學中，一個抽象語法樹，或者詞法樹，是一個樹，這個樹表示或者說抽象出了編程語言的源代碼的結構。

這個工具能在線可視化解析出一段代碼的抽象語法樹，可能能幫助你理解

這個能夠進一步看更詳盡的信息

下面舉一個上邊工具中的demo，看看js在執行以前的三步中的前兩步都是具體的幹了啥。

var a = 42;
            var b = 5;
            function addA(d) {
            return a + d;
            }
            var c = addA(2) + b;

第一步，詞法分析，以上代碼詞法分析以後長成以下圖所示

第二步，語法分析，生產抽象語法樹，生成的抽象語法樹以下圖所示

JavaScript Parser

JavaScript Parser 把js源碼轉化爲抽象語法樹的解析器。前邊咱們也說了。瀏覽器在執行js以前會把js源碼經過解析器轉化爲抽象語法樹，再進一步轉化爲字節碼甚至是機器碼。

經常使用的JavaScript Parser有：

• Esprima
• UglifyJS2
• Traceur
• Acorn
• Espree
• Shfit

使用Esprima生成並使用抽象語法樹。

1. 經過esprima將一個空函數的源碼生成一棵AST樹
2. 經過estraverse遍歷並更新AST樹
3. 經過escodegen將AST從新生成源碼

抽象語法樹的用途

其實從以上的三個工具，也可大體猜想到抽象語法樹的通常用途了。大體分爲幾類吧

1. IDE插件，如代碼語法檢查，代碼風格檢查，代碼的格式化，代碼高亮，代碼錯誤等等之類的
2. 代碼的混淆壓縮，如UglifyJS2等
3. 轉換代碼的工具。如webpack，rollup，各類代碼規範之間的轉換，ts，jsx等轉換爲原生js