抽象語法樹(Abstract Syntax Tree)

余學文發布于2019-08-22 16:20 / 1956人閱讀

摘要：例如會被分解成解析語法分析這個過程是將詞法單元流數組轉換成一個由元素逐級嵌套所組成的代表了程序語法結構的樹，這個樹就叫抽象語法樹。常用的有使用生成并使用抽象語法樹。

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

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生成并使用抽象語法樹。

通過esprima將一個空函數的源碼生成一棵AST樹

通過estraverse遍歷并更新AST樹

通過escodegen將AST重新生成源碼

抽象語法樹的用途

其實從以上的三個工具，也可大致猜測到抽象語法樹的一般用途了。大致分為幾類吧

IDE插件，如代碼語法檢查，代碼風格檢查，代碼的格式化，代碼高亮，代碼錯誤等等之類的

代碼的混淆壓縮，如UglifyJS2等

轉換代碼的工具。如webpack，rollup，各種代碼規范之間的轉換，ts，jsx等轉換為原生js

云服務器 GPU云服務器抽象語法樹 php tree 樹 python 語法樹 abstract?

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94261.html

何為語法樹

摘要：原文鏈接何為語法樹什么是語法樹你是否曾想過，這個世界存在這么多語言的意義。語法樹，計算機描述世界真理的樹狀結構。不同的語言，都會配之不同的語法分析器，而語法分析器是把源代碼作為字符串讀入解析，并建立語法樹的程序。原文鏈接：BlueSun | 何為語法樹什么是語法樹？你是否曾想過，這個世界存在這么多語言的意義。假如現在你面前有一個物體，它是一個不規則的圓體，整個身體通紅，頭部還有...

hikui 2019-08-19 17:52 評論0 收藏0
Vue源碼解析之Template轉化為AST

摘要：下面用具體代碼進行分析。匹配不到那么就是開始標簽，調用函數解析。如這里的轉化為加上是為了的下一步轉為函數，本文中暫時不會用到。再把轉化后的內容進。什么是AST 在Vue的mount過程中，template會被編譯成AST語法樹，AST是指抽象語法樹（abstract syntax tree或者縮寫為AST），或者語法樹（syntax tree），是源代碼的抽象語法結構的樹狀表現形式。...

huangjinnan 2019-08-21 17:00 評論0 收藏0
實現一個簡易的webpack

摘要：首先一段代碼轉化成的抽象語法樹是一個對象，該對象會有一個頂級的屬性第二個屬性是是一個數組。最終完成整個文件依賴的處理。參考文章抽象語法樹一看就懂的抽象語法樹源碼所有的源碼已經上傳背景隨著前端復雜度的不斷提升，誕生出很多打包工具，比如最先的grunt，gulp。到后來的webpack和 Parcel。但是目前很多腳手架工具，比如vue-cli已經幫我們集成了一些構建工具的使用。有的時...

darcrand 2019-08-26 12:01 評論0 收藏0
JavaScript 是如何工作的：解析、抽象語法樹（AST）+ 提升編譯速度5個技巧

摘要：無論你使用的是解釋型語言還是編譯型語言，都有一個共同的部分將源代碼作為純文本解析為抽象語法樹的數據結構。和抽象語法樹相對的是具體語法樹，通常稱作分析樹。這是引入字節碼緩存的原因。這是專門探索 JavaScript 及其所構建的組件的系列文章的第 14 篇。想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等著你！如果你錯過了前面的章節，可以在這里找到它們： JavaS...

raoyi 2019-08-23 14:52 評論0 收藏0
PHP7 的抽象語法樹（AST）帶來的變化

摘要：本文并不會告訴你抽象語法樹是什么，這需要你自己去了解，這里只是描述給帶來的一些變化。中在語法分析階段不再直接生成，而是先生成，所以過程多了一步詞法掃描分析，將源文件轉換成流語法分析，從流生成抽象語法樹從抽象語法樹生成。本文大部分內容參照 AST 的 RFC 文檔而成：https://wiki.php.net/rfc/abstract_syntax_tree，為了易于理解從源文檔中節選...

Coding01 2019-06-27 11:45 評論0 收藏0