接触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
网友评论