2. 程式人生 > >有史以來最小的編譯器原始碼解析

有史以來最小的編譯器原始碼解析

阿新 • • 發佈：2018-12-09

後續內容更新，請前往：個人部落格，歡迎一起交流。

前言

稍微接觸一點前端，我們都知道現在前端“ES6即正義”，然而瀏覽器的支援還處於進行階段，所以我們常常會用一個神奇的工具將 ES6 語法轉換為目前支援比較廣泛的 ES5 語法，這裡我們所說的神奇的工具就是編譯器。編譯器功能非常純粹，將字串形式的輸入語言編譯成目標語言的程式碼字串（以及sourcemap），常用的編譯器除了我們熟知的 Babel 之外，還有 gcc。不過我們今天的主角是號稱可能是有史以來最小的編譯器the-super-tiny-compiler，去掉註釋也就200多行程式碼，作者 James Kyle 更是 Babel 的活躍維護者之一。這個編譯器的功能很簡單，主要把 Lisp 風格的函式呼叫轉換成 C 風格的，例如：

Lisp 風格（轉化前） C 風格（轉化後）
2 + 2 (add 2 2) add(2, 2)
4 - 2 (subtract 4 2) subtract(4, 2)
2 + (4 - 2) (add 2 (subtract 4 2)) add(2, subtract(4, 2))

編譯器工作的三個階段

絕大多數編譯器的編譯過程都差不多，主要分為三個階段：解析：將程式碼字串解析成抽象語法樹。轉換：對抽象語法樹進行轉換操作。程式碼生成：根據轉換後的抽象語法樹生成目的碼字串。

解析

解析過程主要分為兩部分：詞法分析和語法分析。1、詞法分析是由詞法分析器把原始程式碼字串轉換成一系列詞法單元（token），詞法單元是一個數組，由一系列描述獨立語法的物件組成，它們可以是數值、標籤、標點符號、運算子、括號等。2、

語法分析是由語法分析器將詞法分析器生成的詞法單元轉化為能夠描述語法結構（包括語法成分及其關係）的中間表示形式（Intermediate Representation）或抽象語法樹（Abstract Syntax Tree），其中抽象語法樹（簡稱AST）是個深層巢狀的物件。

我們簡單看一下 the-super-tiny-compiler 的整個解析過程：

// 原始程式碼字串
(add 2 (subtract 4 2))

// 詞法分析轉化後生成的詞法單元
[
  { type: 'paren',  value: '('        },
  { type: 'name',   value: 'add'      },
  { type: 'number', value: '2'        },
  { type: 'paren',  value: '('        },
  { type: 'name',   value: 'subtract' },
  { type: 'number', value: '4'        },
  { type: 'number', value: '2'        },
  { type: 'paren',  value: ')'        },
  { type: 'paren',  value: ')'        },
]

// 語法分析轉化後生成的抽象語法樹（AST）
{
  type: 'Program',
  body: [{
    type: 'CallExpression',
    name: 'add',
    params: [{
      type: 'NumberLiteral',
      value: '2',
    }, {
      type: 'CallExpression',
      name: 'subtract',
      params: [{
        type: 'NumberLiteral',
        value: '4',
      }, {
        type: 'NumberLiteral',
        value: '2',
      }]
    }]
  }]
}

轉換

轉換過程主要任務是修改 AST，即遍歷解析過程生成的 AST，同時進行一系列操作，比如增/刪/改節點、增/刪/改屬性、建立新樹等，我們簡單看一下 the-super-tiny-compiler 的整個轉換過程：

// 原始程式碼字串
(add 2 (subtract 4 2))

// 解析過程生成的 AST
{
  type: 'Program',
  body: [{
    type: 'CallExpression',
    name: 'add',
    params: [{
      type: 'NumberLiteral',
      value: '2',
    }, {
      type: 'CallExpression',
      name: 'subtract',
      params: [{
        type: 'NumberLiteral',
        value: '4',
      }, {
        type: 'NumberLiteral',
        value: '2',
      }]
    }]
  }]
}

// 轉換過程生成的 AST
{
  type: 'Program',
  body: [{
    type: 'ExpressionStatement',
    expression: {
      type: 'CallExpression',
      callee: {
        type: 'Identifier',
        name: 'add'
      },
      arguments: [{
        type: 'NumberLiteral',
        value: '2'
      }, {
        type: 'CallExpression',
        callee: {
          type: 'Identifier',
          name: 'subtract'
        },
        arguments: [{
          type: 'NumberLiteral',
          value: '4'
        }, {
          type: 'NumberLiteral',
          value: '2'
        }]
      }
    }
  }]
}

程式碼生成

根據轉換過程生成的抽象語法樹生成目的碼字串。

原始碼實現

接下來我們根據編譯器工作的三個階段逐一分析一下 the-super-tiny-compiler 原始碼實現。

詞法分析

詞法分析器主要任務把原始程式碼字串轉換成一系列詞法單元（token）。

// 詞法分析器 引數：程式碼字串input
function tokenizer(input) {
  // 當前正在處理的字元索引
  let current = 0;
  // 詞法單元陣列
  let tokens = [];

  // 遍歷字串，獲得詞法單元陣列
  while (current < input.length) {
    let char = input[current];

    // 匹配左括號
    if (char === '(') {

      // type 為 'paren'，value 為左圓括號的物件
      tokens.push({
        type: 'paren',
        value: '('
      });

      // current 自增
      current++;

      // 結束本次迴圈，進入下一次迴圈
      continue;
    }

    // 匹配右括號
    if (char === ')') {
      tokens.push({
        type: 'paren',
        value: ')'
      });

      current++;

      continue;
    }

    // \s：匹配任何空白字元，包括空格、製表符、換頁符、換行符、垂直製表符等
    let WHITESPACE = /\s/;
    // 跳過空白字元
    if (WHITESPACE.test(char)) {
      current++;
      continue;
    }

    // [0-9]：匹配一個數字字元
    let NUMBERS = /[0-9]/;
    // 匹配數值
    if (NUMBERS.test(char)) {
      let value = '';
      // 匹配連續數字，作為數值
      while (NUMBERS.test(char)) {
        value += char;
        char = input[++current];
      }
      tokens.push({
        type: 'number',
        value
      });

      continue;
    }

    // 匹配形如"abc"的字串
    if (char === '"') {
      let value = '';

      // 跳躍左雙引號
      char = input[++current];

      // 獲取兩個雙引號之間的所有字元
      while (char !== '"') {
        value += char;
        char = input[++current];
      }

      // 跳躍右雙引號
      char = input[++current];

      tokens.push({
        type: 'string',
        value
      });

      continue;
    }

    // [a-z]：匹配1個小寫字元 i 模式中的字元將同時匹配大小寫字母
    let LETTERS = /[a-z]/i;
    // 匹配函式名，要求只含大小寫字母
    if (LETTERS.test(char)) {
      let value = '';

      // 獲取連續字元
      while (LETTERS.test(char)) {
        value += char;
        char = input[++current];
      }

      tokens.push({
        type: 'name',
        value
      });

      continue;
    }

    // 無法識別的字元，丟擲錯誤提示
    throw new TypeError('I dont know what this character is: ' + char);
  }

  // 詞法分析器的最後返回詞法單元陣列
  return tokens;
}

通過遍歷程式碼字串，分揀出各個詞素，然後構成由一系列描述獨立語法的物件組成的陣列的詞法單元。

語法分析

語法分析器主要任務是將詞法分析器生成的詞法單元轉化為能夠描述語法結構（包括語法成分及其關係）的中間表示形式（Intermediate Representation）或抽象語法樹（Abstract Syntax Tree）。

// 語法分析器 引數：詞法單元陣列
function parser(tokens) {
  // 當前正在處理的 token 索引
  let current = 0;
  // 遞迴遍歷（因為函式呼叫允許巢狀），將 token 轉成 AST 節點
  function walk() {
    // 獲取當前 token
    let token = tokens[current];

    // 數值
    if (token.type === 'number') {
      // current 自增
      current++;

      // 生成一個 AST節點 'NumberLiteral'，用來表示數值字面量
      return {
        type: 'NumberLiteral',
        value: token.value,
      };
    }

    // 字串
    if (token.type === 'string') {
      current++;

      // 生成一個 AST節點 'StringLiteral'，用來表示字串字面量
      return {
        type: 'StringLiteral',
        value: token.value,
      };
    }

    // 函式
    if (token.type === 'paren' && token.value === '(') {
      // 跳過左括號，獲取下一個 token 作為函式名
      token = tokens[++current];

      let node = {
        type: 'CallExpression',
        name: token.value,
        params: []
      };

      // 再次自增 `current` 變數，獲取引數 token
      token = tokens[++current];

      // 右括號之前的所有token都屬於引數
      while ((token.type !== 'paren') || (token.type === 'paren' && token.value !== ')')) {
        node.params.push(walk());
        token = tokens[current];
      }

      // 跳過右括號
      current++;

      return node;
    }
    // 無法識別的字元，丟擲錯誤提示
    throw new TypeError(token.type);
  }

  // AST的根節點
  let ast = {
    type: 'Program',
    body: [],
  };

  // 填充ast.body
  while (current < tokens.length) {
    ast.body.push(walk());
  }

  // 最後返回ast
  return ast;
}

通過遞迴來將詞法分析器生成的詞法單元轉化為能夠描述語法結構的 ast。

遍歷

// 遍歷器
function traverser(ast, visitor) {
  // 遍歷 AST節點陣列 對陣列中的每一個元素呼叫 `traverseNode` 函式。
  function traverseArray(array, parent) {
    array.forEach(child => {
      traverseNode(child, parent);
    });
  }

  // 接受一個 `node` 和它的父節點 `parent` 作為引數
  function traverseNode(node, parent) {
    // 從 visitor 獲取對應方法的物件
    let methods = visitor[node.type];
    // 通過 visitor 對應方法操作當前 node
    if (methods && methods.enter) {
      methods.enter(node, parent);
    }

    switch (node.type) {
      // 根節點
      case 'Program':
        traverseArray(node.body, node);
        break;
      // 函式呼叫
      case 'CallExpression':
        traverseArray(node.params, node);
        break;
      // 數值和字串，不用處理
      case 'NumberLiteral':
      case 'StringLiteral':
        break;

      // 無法識別的字元，丟擲錯誤提示
      default:
        throw new TypeError(node.type);
    }
    if (methods && methods.exit) {
      methods.exit(node, parent);
    }
  }
  // 開始遍歷
  traverseNode(ast, null);
}

通過遞迴遍歷 AST，在遍歷過程中通過 visitor 對應方法操作當前 node，這裡和切面差不多。

轉換

// 轉化器，引數：AST
function transformer(ast) {
  // 建立 `newAST`，它與之前的 AST 類似，Program：新AST的根節點
  let newAst = {
    type: 'Program',
    body: [],
  };

  // 通過 _context 維護新舊 AST，注意 _context 是一個引用，從舊的 AST 到新的 AST。
  ast._context = newAst.body;

  // 通過遍歷器遍歷 引數：AST 和 visitor
  traverser(ast, {
    // 數值，直接原樣插入新AST
    NumberLiteral: {
      enter(node, parent) {
        parent._context.push({
          type: 'NumberLiteral',
          value: node.value,
        });
      },
    },
    // 字串，直接原樣插入新AST
    StringLiteral: {
      enter(node, parent) {
        parent._context.push({
          type: 'StringLiteral',
          value: node.value,
        });
      },
    },
    // 函式呼叫
    CallExpression: {
      enter(node, parent) {
        // 建立不同的AST節點
        let expression = {
          type: 'CallExpression',
          callee: {
            type: 'Identifier',
            name: node.name,
          },
          arguments: [],
        };

        // 函式呼叫有子類，建立節點對應關係，供子節點使用
        node._context = expression.arguments;

        // 頂層函式呼叫算是語句，包裝成特殊的AST節點
        if (parent.type !== 'CallExpression') {

          expression = {
            type: 'ExpressionStatement',
            expression: expression,
          };
        }
        parent._context.push(expression);
      },
    }
  });
  // 最後返回新 AST
  return newAst;
}

這裡通過 _context 引用維護新舊 AST，簡單方便，但會汙染舊AST。

程式碼生成

// 程式碼生成器 引數：新 AST
function codeGenerator(node) {

  switch (node.type) {
    // 遍歷 body 屬性中的節點，且遞迴呼叫 codeGenerator，結果按行輸出
    case 'Program':
      return node.body.map(codeGenerator)
        .join('\n');

    // 表示式，處理表達式內容，並用分號結尾
    case 'ExpressionStatement':
      return (
        codeGenerator(node.expression) +
        ';'
      );

    // 函式呼叫，新增左右括號，引數用逗號隔開
    case 'CallExpression':
      return (
        codeGenerator(node.callee) +
        '(' +
        node.arguments.map(codeGenerator)
          .join(', ') +
        ')'
      );

    // 識別符號，數值，原樣輸出
    case 'Identifier':
      return node.name;
    case 'NumberLiteral':
      return node.value;

    // 字串，用雙引號包起來再輸出
    case 'StringLiteral':
      return '"' + node.value + '"';

    // 無法識別的字元，丟擲錯誤提示
    default:
      throw new TypeError(node.type);
  }
}

根據轉換後的新AST生成目的碼字串。

編譯器

function compiler(input) {
  let tokens = tokenizer(input);
  let ast    = parser(tokens);
  let newAst = transformer(ast);
  let output = codeGenerator(newAst);

  return output;
}

編譯器整個工作流程：1、input => tokenizer => tokens2、tokens => parser => ast3、ast => transformer => newAst4、newAst => generator => output將上面流程串起來，就構成了簡單的編譯器。

相關推薦

有史以來最小的編譯器原始碼解析

後續內容更新，請前往：個人部落格，歡迎一起交流。 前言 稍微接觸一點前端，我們都知道現在前端“ES6即正義”，然而瀏覽器的支援還處於進行階段，所以我們常常會用一個神奇的工具將 ES6 語法轉換為目前支援比較廣泛的 ES5 語法，這裡我們所說的神奇的工具就是編譯器。

自定義微博小尾巴 原始碼 解析

1. 註冊應用，申請ID1)請登陸到 http://www.youmi.net/register 註冊一個開發者賬號2)點選建立應用進行新應用建立。3)檢視應用詳情，獲取釋出ID和應用金鑰，在後續初始化中使用。（注意：一個appid只能嚴格對應一個bundle id。如果有特殊需要得聯絡客服 ）2. 下載Yo

143行js頂部進度條最小外掛-nanobar.js原始碼解析

網頁頂部進度條外掛的有四五種，基本原理就是動態地建立一個元素，然後通過設定它的width來實現動畫效果，width增長到達指定位置時，將其去掉。 來看看nanobar.js作者jacoborus是怎麼做到的吧！ /* http://nanobar.micronu

143行js頂部進度條最小插件-nanobar.js源碼解析

lse commonj 接受 定義 end 元素 fine round 網頁 網頁頂部進度條插件的有四五種，基本原理就是動態地創建一個元素，然後通過設置它的width來實現動畫效果，width增長到達指定位置時，將其去掉。來看看nanobar.js作者jacoborus是怎

小而美的Promise庫——promiz原始碼解析

背景 在上一篇部落格[譯]前端基礎知識儲備——Promise/A+規範中，我們介紹了Promise/A+規範的具體條目。在本文中，我們來選擇了promiz，讓大家來看下一個具體的Promise庫的內部程式碼是如何運作的。 promiz是一個體積很小的promise庫（官方介紹約為913 bytes (gz

LeetCode演算法題155：最小棧解析

設計一個支援 push，pop，top 操作，並能在常數時間內檢索到最小元素的棧。 push(x) – 將元素 x 推入棧中。 pop() – 刪除棧頂的元素。 top() – 獲取棧頂元素。 getMin() – 檢索棧中的最小元素。 示例: M

微信小程式--多張圖片下載問題--for迴圈出現 漏下，亂序。最多下載5張圖片的問題解決（附帶個人開發小程式原始碼）

微信小程式多圖下載，之前肯定對單張圖片下載瞭解了。這裡就不再多說。 首先，多圖下載肯定是用到迴圈了。那麼問題就出在迴圈這裡。在迴圈裡呼叫單圖下載方法。這樣就會出現一個問題，就是下載時先遍歷完了，然後再依次執行wx.downloadfile 獲取到下載的臨時檔案路徑，再使用wx.saveIma

某課最全Java併發程式設計高階技術-高效能併發框架原始碼解析與實戰

第1章 課程介紹（Java併發程式設計進階課程） 什麼是Disruptor？它一個高效能的非同步處理框架，號稱“單執行緒每秒可處理600W個訂單”的神器，本課程目標：徹底精通一個如此優秀的開源框架，面試秒殺面試官。本章會帶領小夥伴們先了解課程大綱與重點，然後模擬千萬，億級

【原始碼】基於圖割的廣義快速近似能量最小化：α擴充套件β收縮移動

基於圖割的廣義快速近似能量最小化：α擴充套件β收縮移動 我們提出了α擴充套件β收縮移動演算法，這是廣泛使用的近似能量最小化的αβ交換和α-擴充套件演算法的簡單推廣。 We present α-expansion β-shrink moves, asimple

演算法解析：L-M法求解非線性最小二乘問題

1、什麼是最小二乘問題？ 目標函式能夠寫為m個函式平方和的優化問題， 其中，每個函式fi(x)都是待優化向量x的函式。 2、非線性最小二乘問題 當fi(x)是關於x的非線性函式時，即為非線性優化問題 此時，需要利用Taylor一階展開近似fi(x) fi(x)的

cornerSubPixel亞畫素角點檢測原始碼分析（最小二乘法）

OpenCV的中有cornerSubPixel（）這個API函式用來針對初始的整數角點座標進行亞畫素精度的優化，該函式原型如下： C++: void cornerSubPix(InputArray image, InputOutputArray corners, Siz

解析·NOIP·冷門 CLZ最小環

賜予我力量，去改變我所能改變的;賜予我勇氣，去接受我不能改變的;並賜予我智慧，去分辨這兩者。 -----安東尼達斯 NOIP的圖論題中有一部分是跟圖上的環有關的。蒟蒻的我在USACO上刷題時發現了一種（或許）還沒有普及的快速最小環演算法，擁有極高的效率，可以在求最短路的時間複雜度內求出經過任意一點的最小環

最新版azkaban-3.40.0原始碼解析

web上傳zip以及解析入庫 web服務上傳zip包 入口： azkaban.webapp.servlet.LoginAbstractAzkabanServlet.doPost(HttpServletRequest, HttpServletRes

詳解SVM系列（六）：深入解析 序列最小最優化SMO演算法一

SMO演算法是幹啥的 首先要先搞明白一個基本的問題： SMO演算法是幹啥的？ 通過前面的介紹，我們現在掌握了線性不可分支援向量機。其形式為如下的凸二次規劃： m

Java併發程式設計高階技術-高效能併發框架原始碼解析與實戰（已完結）2018（最全）

1.背景 匿名內部類有以下問題： 語法過於冗餘 匿名類中的this和變數名容易使人產生誤解 型別載入和例項建立語義不夠靈活 無法捕獲非final的區域性變數 無法對控制流進行抽象 lambda表示式提供了輕量級的語法。 2.語法 lambda表示式的語法由引數列表、箭頭符號->和函式體

史上最全Universal-Image-Loader原始碼解析————核心程式碼篇

背景 接著上一篇的內容，我們接著看ImageLoader的核心程式碼篇，上一篇主要是看ImageLoader的記憶體優化，主要包括磁碟快取和記憶體快取，還有就是記憶體的快取策略，這一篇，我們重點來看一下ImageLoader是如何使用這些記憶體和進行圖片的

centos7最小化版無法解析域名

1.NET網路配置子網IP地址與虛擬機器網絡卡IP在一個地址段2.網絡卡閘道器設定也是在一個地址段下3.在網絡卡的配置檔案中加入DNS1=8.8.8.8  #設定主DNSDNS2=8.8.4.4  #設定備DNS4.重啟網路systemctl restart network5

面向物件以及運用最大最小搜尋的井字棋設計（附原始碼）

一:實驗題目 井字棋遊戲設計 利用面向物件程式設計的知識，通過設計board、player、game類，實現一個具有人人對弈、人機對弈以及機機對弈的井字棋遊戲。 要求： ①對類設定和實現的要求 1.封裝：需要對遊戲中的資料進行相應的封裝保護。 在井字

求旋轉陣列的最小數字演算法的解析以及完整c語言程式碼實現

          首先了解什麼是旋轉陣列：即把一個數組的最開始的若干個元素搬到陣列的末尾，即成為旋轉陣列，例如陣列{3，7，1，8，2}為{1，8，2，3，7}的一個旋轉陣列。         題目：輸入一個遞增排序的陣列的一個旋轉，輸出旋轉陣列的最小元素，例如{1，2，

動態規劃演算法舉例解析（最大收益和最小損失選擇）

在說動態規劃的例子之前，先說明一下動態規劃和分治演算法的區別 雖然兩者都是通過組合子問題的解來求解原問題但是分治方法將問題劃分為互不相交的子問題，遞迴的求解子問題再將它們的解組合起來求出原問題的解。 而動態規劃演算法應用於子問題重疊的情況，即不同的子問題具有公共的子子問題，