通过DLS解析器,了解JS的编译原理

接触Javascript很长一段时间了,但一直浮在语言的表面,今天决定重头开始更深入的学习Javascript,先从Javascript的编译原理开始。

在程序的执行方式中有编译型和解释型,以前学习的C语言就是编译型语言,它需要提前把所有源代码翻译成机器能识别的指令进行运行。JavaScript就是解释型语言,它可以翻译一条执行一条。如何更通俗的理解编译和解释的区别呢?打个比喻:编译相当于做好一桌子菜再开吃; 解释就是吃火锅。

尽管通常将Javascript归类为“动态”或“稀释执行”语言,但事实上他是一门编译语言,但与传统的编译语言不同,它不是提前编译的,编译的结果也不能在分布式系统中进行移植。例如像V8(Chrome的JS引擎),它其实为了提高JS的运行性能,在运行之前会先将JS编译为本地的机器码,然后再去执行机器码。

一段源代码在执行之前经历三个步骤:

  • 分词/词法分析
  • 解析/语法分析
  • 代码生成

分词/词法分析(Tokenizing/Lexing)

将字符串分解成有意义的代码块,这些代码块被称为词法单元(token)。例如:var a = 2,这段程序的词法单元就是:var、a、=、2。

解析/语法分析(Parsing)

将词法单元(数组)转换成一个由元素逐级嵌套所组成的代表了程序语法结构的数。这个数称为“抽象语法树”(Abstract Syntax Tree),简称”AST”。

代码生成

将AST转换为可执行代码的过程称为代码生成。

以上只是进行宏观、简单的介绍,JavaScript引擎实际上做的事情比这个复杂的多,在JIT(Just-in-time)就是对代码进行各种优化。

其实理解编译的过程,自己动手实现一个简单的编译器能更好的理解这个过程。下面是一个用户JavaScript实现的简单编译器:

/**
 * sum 加
 * sub 减
 * mul 乘
 * div 除
 * ##### 以下是我们编译器要实现的原理 ###############
 * (sum 3 3)                            2+2
 * (sub 3 2)                            3-2
 * (mul (sum 3 3) (sub 3 2))            (3+3)*(3-2)
 * (div (mul (sum 3 3) (sub 3 2)) 1)    ((3+3)*(3-2))/1
*/

/**
 *  分词/词法分析
 * @argument {string} str 接收一个代码组成的字符串
 * @return {array}    返回一个词法单元组成的数组
 */
function tokenizer(str) {
  // 当前字符的位置
  let current = 0;
  // 存放词法单元的敌法
  const tokens = [];

  const regSpace = /\s/;
  const regNumber = /[0-9]/;
  const regLetter = /[a-z]/i;
  const len = str.length;

  while (current < len) {
    let char = str[current];

    if (char === '(') {
      tokens.push({
        type: 'paren',
        value: '('
      });
      current++;
      continue;
    }

    if (char === ')') {
      tokens.push({
        type: 'paren',
        value: ')'
      });
      current++;
      continue;
    }

    // 检测类型为空
    if (regSpace.test(char)) {
      current++;
      continue;
    }

    // 检测类型为数值
    if (regNumber.test(char)) {
      let value = '';

      while (regNumber.test(char)) {
        value += char;
        char = str[++current];
      }

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

    // 检测类型为字符串
    if (regLetter.test(char)) {
      let value = '';

      while (regLetter.test(char)) {
        value += char;
        char = str[++current];
      }

      tokens.push({
        type: 'operator',
        value: value,
      });
      continue;
    }
    throw new TypeError('I dont know what this character is: ' + char);
  }
  return tokens;
}

/**
 * 语法分析器
 * @argument {array} 接收一个词法单元(token)组成的数组
 * @return {object}  返回一个把词法单元流转换成一个“抽象语法树”AST
*/
function parser(tokens) {
  let current = 0;

  function parse() {
    let token = tokens[current];

    if (token.type === 'number') {
      current++;
      return {
        type: 'NumberLiteral',
        value: token.value
      };
    }

    if ( token.type === 'paren' && token.value === '(') {
      token = tokens[++current];

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

      token = tokens[++current];

      while (
        (token.type !== 'paren') || 
        (token.type === 'paren' && token.value !== ')') 
      ) {
        node.params.push(parse());
        token = tokens[current];
      }

      current++;

      return node;
    }

    throw new TypeError(token.type)
  }

  return parse();
}

/** 将抽象语法树生成代码
 * @argument {object} 抽象语法树
 * @return {string} 可执行代码字符串
*/
function codeGenerator(ast) {
  const operator = {
    sum: '+',
    sub: '-',
    mul: '*',
    div: '/'
  };

  const compileNum = ast => ast.value;
  const compileOp = ast => `(${ast.params.map(compile).join(' ' + operator[ast.name] + ' ')})`;
  const compile = ast => ast.type === 'NumberLiteral' ? compileNum(ast) : compileOp(ast);
  return compile(ast);
}
// 编译器:词法分析 + 语法分析 + 代码生成
function compiler(code) {
  return codeGenerator(parser(tokenizer(code)));
}

const codeResult = compiler('(div (mul (sum 3 3) (sub 3 2)) 1) ')
console.log(codeResult)  //=>  (((3 + 3) * (3 - 2)) / 1)
console.log(eval(codeResult)) //=> 6

上面的解析器,将词法分析器把词法单元分类: “paren”, “number”, “operator”三种类型进行存储,再通过语法分析器将数值和运算符区分出来,通过递归解析把词法单元流转换成AST,最后通过代码生成器,根据AST中节点的类型转换可执行的代码。

总结

通过实现一个简单的DLS解释器,我们能宏观的了解JavaScript在代码执行前几微秒发生的编译过程,当然这只是最简单的介绍,具体可以了解去JIT做了什么。

参考文献

《你不知道的JavaScript》
用25行JavaScript语句实现一个简单的编译器
the-super-tiny-compiler-cn

    原文作者:内孤
    原文地址: https://www.jianshu.com/p/65aee3ce90ed
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞