- 写到这儿的时候其实思路就有点乱了，很大部分的原因是之前的代码写了太久，有的地方确实忘了。所以今天打算趁机总结一下回顾一下。
- 写这个parser的原因是实现前端的表达式部分。
- parser的流程是拿到表达式，表达式肯定是个字符串，解析字符串，生成token。
- 然后在AST构建阶段，通过消耗token来构建AST。
- compile阶段是通过AST的节点类型选择相应的流程进行编译，归根结底是编译出一个字符串，并且用这个字符串生成一个Function。
数字和字符串和true,false,null
- 无论是整数还是小数，还是科学计数，还是字符串还是布尔值，都会生成一个token，这个token和其他token不同的是，这个token有一个value属性。这种token称为constants类型的token。
- 构建AST的时候，先检测这个token是不是其他的token，如果都不符合，才会认为这个token是一个constants类型的token，进入处理constants的流程。
- constants会将这种token转化成Literal类型的节点，Literal类型的节点有一个value属性。
- 在编译阶段，Literal类型的节点会返回它的value属性。
数组
- 数组会生成中括号和引号等token，中括号和引号这类token是属于identifier类型的token。
- 构建AST时，如果遇到中括号的token，说明是一个数组，需要进入数组流程。
- 在数组流程里面，会生成一个ArrayExpression类型的节点，这个节点有elements属性，用于存储数组内容。
- 编译的时候，遇到这个ArrayExpression节点，会把elements属性中的内容都遍历出来，返回一个字符串。
case ASTBuilder.ArrayExpression:
var elements = [];
for (var i = 0; i < ast.elements.length; i++) {
elements.push(this.recurse(ast.elements[i]))
}
return "[" + elements.join(',') + "]";
对象
- 对象就如同数组，会生成大括号以及冒号等token。
- AST阶段，遇到大括号的时候会进入对象流程，最后得到一个ObjectExpression节点，这个节点有一个properties属性，用于记录对象的属性值。
3.编译阶段，还是会以字符串的形式处理ObjectExpression节点。
case ASTBuilder.ObjectExpression:
var properties = [];
for (var i = 0; i < ast.properties.length; i++) {
var key = ast.properties[i].key.name;
var value = this.escape(ast.properties[i].value.value);
properties.push(key + ":" + value);
}
return "{" + properties.join(',') + "}";
寻找属性部分
- 遇到
parse('name')这种不是字符串也不是值的时候，产生identifier类型token。 - 产生的AST节点是MemberExpression。
- 编译遇到MemberExpression节点，检测节点的object属性和property属性。
- property属性可以进行另一次primary流程，找到一个token。
- object属性可能是一个ast树。需要遍历。不管怎样，object总会返回一个变量。拿这个图来说：
image.png
最深入的节点是红色部分user，identifier类型，在这里会检测scope和local，返回一个变量v0。
然后是绿色部分，也是一个object，返回一个变量是v1=v0.student。
最后到外层返回的是v2 = v1.name。在program部分得到的结果就是
return v2
如果是中括号分割的MemberExpression，则产生的变量为v1=v0[student]...以此类推。
方法调用部分
0.假设是这样的代码：
var scope = {
user:{
name: 'wangji',
getName: function () {
return this.name;
}
}
}
var fn = parse('user.getName()');
expect(fn(scope)).toBe('wangji');
- 遇到带括号的identifier，代表是方法调用。
- AST阶段产生的是CallExpression节点。这个节点有callee属性，代表方法调用时候的上下文，arguments属性，代表方法调用时候的参数，这里记录的是实参。
- 难度在于解析方法中的this关键字。
- 思路是在遇到CallExpression的时候，recurse的时候传入一个context对象，这个对象有name属性用来记录方法名（getName）,left属性用来记录方法所属的对象（scope.user）
- 编译的时候编译CallExpression的callee属性时候，传入一个context空对象，经过一系列编译后，往里面不断填充内容，成为所需要的context对象。
- 这个callee属性是一个MemberExpression节点，于是编译它的object属性，这个object属性返回一个变量v1=scope.user；记录下来context.context=v1.
- 然后把v1和property属性组装，变成v0=v1.getName;返回v0。
- 这时候callee成为了v0。检测context对象，发现是有内容的，所以callee变成v1.getName
- 最终执行的函数是scope.user.getName()
10.如果不加context对象，最终执行的是v0&&vo()
其核心在于函数调用时候的所在上下文，如果直接调用v0()，那么v0里面的this是与window对象绑定的，如果调用的是v1.getName，那么getName里面的this是与v1绑定的。
