自制前端前端框架 Day14. 回顾并理清思路

1. 写到这儿的时候其实思路就有点乱了，很大部分的原因是之前的代码写了太久，有的地方确实忘了。所以今天打算趁机总结一下回顾一下。
2. 写这个parser的原因是实现前端的表达式部分。
3. parser的流程是拿到表达式，表达式肯定是个字符串，解析字符串，生成token。
4. 然后在AST构建阶段，通过消耗token来构建AST。
5. compile阶段是通过AST的节点类型选择相应的流程进行编译，归根结底是编译出一个字符串，并且用这个字符串生成一个Function。

数字和字符串和true,false,null

1. 无论是整数还是小数，还是科学计数，还是字符串还是布尔值，都会生成一个token，这个token和其他token不同的是，这个token有一个value属性。这种token称为constants类型的token。
2. 构建AST的时候，先检测这个token是不是其他的token，如果都不符合，才会认为这个token是一个constants类型的token，进入处理constants的流程。
3. constants会将这种token转化成Literal类型的节点，Literal类型的节点有一个value属性。
4. 在编译阶段，Literal类型的节点会返回它的value属性。

数组

1. 数组会生成中括号和引号等token，中括号和引号这类token是属于identifier类型的token。
2. 构建AST时，如果遇到中括号的token，说明是一个数组，需要进入数组流程。
3. 在数组流程里面，会生成一个ArrayExpression类型的节点，这个节点有elements属性，用于存储数组内容。
4. 编译的时候，遇到这个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(',') + "]";

对象

1. 对象就如同数组，会生成大括号以及冒号等token。
2. 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(',') + "}";

寻找属性部分

1. 遇到parse('name')这种不是字符串也不是值的时候，产生identifier类型token。
2. 产生的AST节点是MemberExpression。
3. 编译遇到MemberExpression节点，检测节点的object属性和property属性。
4. property属性可以进行另一次primary流程，找到一个token。
5. 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');

1. 遇到带括号的identifier，代表是方法调用。
2. AST阶段产生的是CallExpression节点。这个节点有callee属性，代表方法调用时候的上下文，arguments属性，代表方法调用时候的参数，这里记录的是实参。
3. 难度在于解析方法中的this关键字。
4. 思路是在遇到CallExpression的时候，recurse的时候传入一个context对象，这个对象有name属性用来记录方法名（getName）,left属性用来记录方法所属的对象（scope.user）
5. 编译的时候编译CallExpression的callee属性时候，传入一个context空对象，经过一系列编译后，往里面不断填充内容，成为所需要的context对象。
6. 这个callee属性是一个MemberExpression节点，于是编译它的object属性，这个object属性返回一个变量v1=scope.user；记录下来context.context=v1.
7. 然后把v1和property属性组装，变成v0=v1.getName;返回v0。
8. 这时候callee成为了v0。检测context对象，发现是有内容的，所以callee变成v1.getName
9. 最终执行的函数是scope.user.getName()
   10.如果不加context对象，最终执行的是v0&&vo()

其核心在于函数调用时候的所在上下文，如果直接调用v0()，那么v0里面的this是与window对象绑定的，如果调用的是v1.getName，那么getName里面的this是与v1绑定的。