通过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做了什么。

作者：内孤
链接：https://www.jianshu.com/p/65aee3ce90ed