初識AST (一)

什麼是AST

抽象語法樹（Abstract Syntax Tree，AST），或簡稱語法樹（Syntax tree），是源代碼語法結構的一種抽象表示。它以樹狀的形式表現編程語言的語法結構，樹上的每一個節點都表示源代碼中的一種結構。

應用場景

抽象語法樹在不少領域有普遍的應用，好比瀏覽器，智能編輯器，編譯器等。在JavaScript中，雖然咱們並不會經常與AST直接打交道，但卻也會常常的涉及到它。例如使用UglifyJS來壓縮代碼，bable對代碼進行轉換，ts類型檢查，語法高亮等，實際這背後就是在對JavaScript的抽象語法樹進行操做。

解析器 Parser

介紹前，請先打開 astexplorer.net/ 這個網址，這是個在線代碼轉化成AST工具。 輸入簡單的一行代碼

var name = 'ast';
const names= ['zs', 'ls']
複製代碼

輸出結果爲

{
  "type": "Program",
  "body": [
    {
      "type": "VariableDeclaration",
      "declarations": [
        {
          "type": "VariableDeclarator",
          "id": {
            "type": "Identifier",
            "name": "name"
          },
          "init": {
            "type": "Literal",
            "value": "ast",
            "raw": "'ast'"
          }
        }
      ],
      "kind": "var"
    },
    {
      "type": "VariableDeclaration",
      "declarations": [
        {
          "type": "VariableDeclarator",
          "id": {
            "type": "Identifier",
            "name": "names"
          },
          "init": {
            "type": "ArrayExpression",
            "elements": [
              {
                "type": "Literal",
                "value": "zs",
                "raw": "'zs'"
              },
              {
                "type": "Literal",
                "value": "ls",
                "raw": "'ls'"
              }
            ]
          }
        }
      ],
      "kind": "const"
    }
  ],
  "sourceType": "module"
}
複製代碼

• type ==> node 類型
  • VariableDeclarator ==> 變量聲明
  • Identifier ==> 標識符，就是咱們寫 JS 時自定義的名稱，如變量名，函數名，屬性名，都歸爲標識符。
  • ArrayExpression ==> 數組表達式
  • Literal ==> 字面量. 這裏的字面量表示值，例如 names= ['zs', 'ls']; 就是zs , ls 不包含[]
• kind 屬性表示是什麼類型的聲明
• id 就是咱們自定義的名字

在輸入一個函數看看結果

function add(a,b){
  return a+b;
}	
複製代碼

輸出

{
  "type": "Program",
  "body": [
    {
      "type": "FunctionDeclaration",
      "id": {
        "type": "Identifier",
        "name": "add"
      },
      "expression": false,
      "generator": false,
      "async": false,
      "params": [
        {
          "type": "Identifier",
          "name": "a"
        },
        {
          "type": "Identifier",
          "name": "b"
        }
      ],
      "body": {
        "type": "BlockStatement",
        "body": [
          {
            "type": "ReturnStatement",
            "argument": {
              "type": "BinaryExpression",
              "left": {
                "type": "Identifier",
                "name": "a"
              },
              "operator": "+",
              "right": {
                "type": "Identifier",
                "name": "b"
              }
            }
          }
        ]
      }
    }
  ],
  "sourceType": "module"
}
複製代碼

這個比上面多了些類型

• type ==> node 類型
  • FunctionDeclaration ==> 函數聲明（非函數表達式）
  • BlockStatement ==> Block語句。
  • ReturnStatement ==> Return語句
  • BinaryExpression ==> 二元操做符表達式
• operator 操做符
• sourceType 源代碼數的來源，一種是script腳本，一種是modules模塊

本節主要對AST有個大概認識，下節主要講如何經過babel將代碼轉成AST在轉成js代碼。