使用JavaScript实现一个“字节码解释器”，并用它重新实现JS科学计算器的后端（后续4）

成功解决了字节码指令生成的问题，掌握一个原则：

1、数值常量expr100一律是MovImm #imm, R0，但把要不要执行Push R0推迟到expr20-60里做判断；
2、假设任何表达式的指令生成结果都对应于其值在R0里，要不要Push 当且仅当：

     此子表达式出现在二元运算的左侧，且右侧需要递归。（注意，右侧如果只是一个数值常量的话，倒是可以直接MovImm #right_imm, R1，不需要对左侧的结果进行Push R0）

function AdvancedCalculator(){   //语法分析的原始输入流：   this.tokens = [];//中缀带括号的, 3种语法分析输入单位：类型为String的(和)、类型为Number的value、类型为Object/String的运算符   this.tokens_scan_index = 0;   this.saved_tokens_scan_index_stack = [];    //用于栈式自动机直接求值的转换后的流：   //this.tokens2_values = [];//后缀value栈   //this.tokens2_op = [];//运算符栈，由于去除了括号，所以只需要区分运算符是一元还是二元的         this.value_buffer = [];   this.assember = new Assembler();}

AdvancedCalculator.prototype = {   //复杂的运算符定义为单独的Object：   SQRT:  "Sqrt",   SIN:  "Sin",   COS:  "Cos",   TAN: "Tan",   COT: "Cot",   LOG:  "Log", //以10为底   LN:  "Ln", //以e为底   POW:  "Pow",//x^y   PI: Math.PI, //这是数值常量，不是运算符，不过也可以映射为0个输入的函数？？   mapUnaryOperator2UnaryFunction: function(opToken){      if(opToken==this.SQRT)         return Math.sqrt;      else if(opToken==this.SIN)         return Math.sin;      else if(opToken==this.COS)         return Math.cos;      else if(opToken==this.TAN)         return Math.tan;      else if(opToken==this.COT)         return function(a){return 1/Math.tan(a);};      else if(opToken==this.LOG)         return Math.log10;      else if(opToken==this.LN)         return Math.log;      else         throw "未识别的一元运算符: "+opToken;   },   mapBinaryOperator2BinaryFunction: function(opToken){      if(opToken==this.POW)         return Math.pow;      else if(opToken=="+")         return function(a,b){return a+b;};      else if(opToken=="-")         return function(a,b){return a-b;};      else if(opToken=="*")         return function(a,b){return a*b;};      else if(opToken=="/")         return function(a,b){return a/b;};      else         throw "未识别的二元运算符: "+opToken;   },  nextToken: function(){      if (this.tokens_scan_index>=0 && this.tokens_scan_index<this.tokens.length){         var token_next = this.tokens[this.tokens_scan_index++];         return token_next;      }      return null;//throw "错误的调用：token流已经结束";   },  hasMoreTokens: function(){      return this.tokens_scan_index>=0 && this.tokens_scan_index<this.tokens.length;   },  pushTokenScanIndex: function(){     assert( this.tokens_scan_index>=0 && this.tokens_scan_index<this.tokens.length);     this.saved_tokens_scan_index_stack.push(this.tokens_scan_index);      return this.saved_tokens_scan_index_stack.length-1;  },  popTokenScanIndexAt: function(stack_index){     assert( stack_index>=0 && stack_index<this.saved_tokens_scan_index_stack.length);     while(this.saved_tokens_scan_index_stack.length>stack_index)        this.tokens_scan_index = this.saved_tokens_scan_index_stack.pop();  },  popTokenScanIndex: function(){      this.tokens_scan_index = this.saved_tokens_scan_index_stack.pop();  },  discardLastTokenScanIndex: function(){     this.saved_tokens_scan_index_stack.pop();  },   isUnaryOperator: function(token){      return token==this.SIN || token== this.COS  || token==this.TAN || token==this.COT || token==this.LOG || token==this.LN;   },   isBinaryFunctionToken: function(token){//特殊的二元函数      return token==this.POW;   },   isBinaryOperator: function(token){//所有的二元中缀操作符（包括二元函数）      return token=="+" || token=="-" || token=="*" || token=="/" || this.isBinaryFunctionToken(token);   },   isOperator: function(token){//返回：0/1单元运算符包括函数/2元运算符      if (this.isUnaryOperator(token))         return 1;      if (this.isBinaryOperator(token))         return 2;      return 0;   },   emitToken: function(token){       this.tokens.push(token);   },   emitValueTokenIfAny: function(){      //检查之前缓存的value_buffer      if (this.value_buffer.length>0) {         var value_str = this.value_buffer.join('');         var value = Number(value_str); //a Number         this.emitToken(value);         this.value_buffer = []; //reset;      }   },   emitButton: function(btn){      if (btn=="(" || btn==")"){//括号是一种特殊的优先级运算符         this.emitValueTokenIfAny();         this.emitToken(btn);      }      else if (this.isOperator(btn)){         this.emitValueTokenIfAny();         this.emitToken(btn);      }else{//0,1,2,3,4,5,6,7,8,9,.         this.value_buffer.push(btn);      }   },   emitButtons: function(btns){      for(var i=0; i<btns.length; ++i){        var btn = btns[i];        this.emitButton(btn);      }   },   //核心算法：如何把一个中缀的混合value和operator的流转换为分离的value和operator的求值栈？   concat: function(target, source){      while(source.length>0){         var item = source.shift();         target.push(item);      }   },   evalExpr: function(){      return this.evalExpr20();//利用短路特性，前一个得到true的话后续子表达式不会执行   },   evalExpr100: function(){      if( !this.hasMoreTokens() )         return [false,];//push操作暂存流位置之前最好都检查一下？区分2种情况：流中无可解析token VS token语法错误      this.pushTokenScanIndex();      var next_token = this.nextToken();      if(next_token==null)         throw "流非正常结束，此处应有一数值value！";      assert(typeof next_token=="number");      if(typeof next_token=="number"){         this.assember.emitInstruction({type: "MovImm", arg: next_token, arg1: "R0"});         //this.assember.emitInstruction({type: "Push", arg: "R0"});         //正常情况下不需要push，只有发现此常量参与了一个二元原语函数的运算左端，而右端是一个需要递归的子表达式的时候         return [true,next_token];      }      this.popTokenScanIndex();      return [false,];   },   evalExpr80: function(){//括号表达式: 似乎不需要特殊处理？因为它只是改变了子表达式的优先级而已      if( !this.hasMoreTokens() )         return [false,];//push操作暂存流位置之前最好都检查一下？区分2种情况：流中无可解析token VS token语法错误       this.pushTokenScanIndex();       var next_token = this.nextToken();       if (next_token==null){//流已经结束          return false;       }       if (next_token=="("){         var result = this.evalExpr(); //if has ES6 destructing, can write as var [success, value] = ...         if(!result[0])            throw "TODO: fixme";//此时saved_tokens_scan_index需要维护成一个栈了         var next_next_token = this.nextToken();         if(next_next_token==null)            throw "流异常结束：expect a )";         assert( next_next_token==")" );         {            //this.assember.emitInstruction({type: "Pop", arg: "R0"});            //this.assember.emitInstruction({type: "Push", arg: "R0"});         }         return result;      }      //else:      this.popTokenScanIndex();      var result = this.evalExpr100();      //this.assember.emitInstruction({type: "Pop", arg: "R0"});      return result;   },   evalExpr60: function(){//一元函数      if( !this.hasMoreTokens() )         return [false,];//push操作暂存流位置之前最好都检查一下？区分2种情况：流中无可解析token VS token语法错误       this.pushTokenScanIndex();       var next_token = this.nextToken();       if (next_token==null) {         throw "流异常结束：期望一个Expr60";       }       if(this.isUnaryOperator(next_token)){         var unaryOp = next_token;         var result = this.evalExpr80();         if (!result[0])            throw "非法表达式！";//此时saved_tokens_scan_index需要维护成一个栈了, TODO: 支持 sin sin 1的语法？         var unaryFunc = this.mapUnaryOperator2UnaryFunction(unaryOp);         {            //this.assember.emitInstruction({type: "Pop", arg: "R0"});            this.assember.emitInstruction({type: "CallPrimitiveFunction", arg: next_token});;            //this.assember.emitInstruction({type: "Push", arg: "R0"});         }         return [true, unaryFunc(result[1])];      }      this.popTokenScanIndex();      var result = this.evalExpr80();      //this.assember.emitInstruction({type: "Push", arg: "R0"});      return result;   },   evalExpr50: function(){//二元函数，如x^y(Pow求幂)      if( !this.hasMoreTokens() )         return [false,];      //expr50  := expr60 x^y expr50 | expr60      var result = this.evalExpr60();      if (result[0]) {         var tmp_value = result[1];         if( !this.hasMoreTokens() ) {            //this.assember.emitInstruction({type: "Push", arg: "R0"})            return [true, tmp_value];         }         this.pushTokenScanIndex();         var next_token = this.nextToken();//should use let;         while(this.isBinaryFunctionToken(next_token)){            //右递归之前，需要将当前的R0压栈：            this.assember.emitInstruction({type: "Push", arg: "R0"});            var result2 = this.evalExpr50();            if (!result2[0]) {               //Here: 二元函数运算符（如x^y）已经匹配，但右边的子表达式不匹配，则输入无效               throw "Input Invalid";            }            //这里的递归已经处理了结合性的问题            var binFunc = this.mapBinaryOperator2BinaryFunction(next_token);            tmp_value = binFunc(tmp_value, result2[1]);            {               //将当前右递归的运算结果（R0）移动到R1:               this.assember.emitInstruction({type: "Mov", arg: "R0", arg1: "R1"});               //将之前压栈的左侧值出栈：               this.assember.emitInstruction({type: "Pop", arg: "R0"});               this.assember.emitInstruction({type: "CallPrimitiveFunction", arg: next_token});            }            //            this.discardLastTokenScanIndex();            if( !this.hasMoreTokens() ){                //this.assember.emitInstruction({type: "Push", arg: "R0"})                return [true, tmp_value];            }         }         this.popTokenScanIndex();         //this.assember.emitInstruction({type: "Push", arg: "R0"})         return [true,tmp_value];      }      return [false,];   },   evalExpr40: function(){//二元乘除, 乘除运算都认为是左结合的      //expr40 ：= expr50 | expr50 ( '*' expr50 )* | expr50 ( '/' expr50)*      //如果解析失败，恢复输入token流的扫描初始位置      if( !this.hasMoreTokens() )         return [false,];//push操作暂存流位置之前最好都检查一下？区分2种情况：流中无可解析token VS token语法错误      this.pushTokenScanIndex();      var result = this.evalExpr50();      if (result[0]) {         var tmp_value = result[1];         if( !this.hasMoreTokens() )            return [true, tmp_value];         this.pushTokenScanIndex();         var next_token = this.nextToken();//should use let;         while(next_token=="*" || next_token=="/"){            //右递归之前，需要将当前的R0压栈：            this.assember.emitInstruction({type: "Push", arg: "R0"});            //            var result2 = this.evalExpr50();            if (!result2[0]) {               //Here: *或/运算符已经匹配，后右边的子表达式不匹配，则输入无效               throw "Input Invalid";            }            //成功：             //var binFunc = this.mapBinaryOperator2BinaryFunction(next_token);             //tmp_value = binFunc(tmp_value, result2[1]);             if(next_token=="*")                tmp_value *= result2[1];             else                tmp_value /= result2[1];             {                //乘法和除法运算都是左结合的，问题是，这里子表达式的优先级都大于＊／                //正常情况下，先算左边的子表达式，压栈，再算右边的，压栈，所以：                this.assember.emitInstruction({type: "Mov", arg: "R0", arg1: "R1"});                this.assember.emitInstruction({type: "Pop", arg: "R0"})                this.assember.emitInstruction({type: "CallPrimitiveFunction", arg: next_token})                //注意，这里assembler的写法与二元函数expr60的类似，不同之处在于parser的控制流程：一个是递归，一个是while             }             //             this.discardLastTokenScanIndex();            //下一次循环：            if( !this.hasMoreTokens() )               return [true, tmp_value];//流已经结束，当前expr40子表达式解析完成（但不代表整体成功）            this.pushTokenScanIndex();            next_token = this.nextToken();         }//end while;         assert( next_token!="*" && next_token!="/");         this.popTokenScanIndex();//回退一个* /的位置，注意，这时可以清除流解析回退栈了（不清除其实也没关系）         return [true,tmp_value];//最顶层的push不用pop了；      }      this.popTokenScanIndex();      throw "Invalid Input: expect expr40 here";    },   //TODO: FIXME 对二元运算符而言，不管其结合性如何、是否满足交换律，优先级高的子表达式先运算！！！   //        但是现在不需要以“编译器”的行为来考虑问题，只是解释器，表达式可以认为没有负作用（赋值语句），则可以直接一边语法解析一边求值   evalExpr20: function(){//二元加减      if( !this.hasMoreTokens() )         return [false,];     //如果解析失败，不用恢复，直接报错     //expr20 := expr40 | expr40 ('+' expr40)* | expr40 ('-' expr40)* //加法可以是右结合的，减法不行, 这里把expr20改为expr40使得加法左结合     //         | expr40 '+' expr20  //这么一来，加法将变成右结合的，不对；     //this.pushTokenScanIndex();     var result = this.evalExpr40();      if (!result[0]) {         return [false,];//整个表达式解析失败      }      //循环地向前看一个运算符，或者是+，或者是-      var tmp_value = result[1];      if( !this.hasMoreTokens() )         return [true, tmp_value];      this.pushTokenScanIndex();      var next_token=this.nextToken();      if(next_token==null){            //注意，前面已经有一个expr40解析成功，所以这里即使流已经结束，仍然可以成功返回            this.discardLastTokenScanIndex();            return [true, tmp_value];         }      while(next_token=="+" || next_token=="-"){         if(next_token=="+"){            //右递归之前，需要将当前的R0压栈：            this.assember.emitInstruction({type: "Push", arg: "R0"});            //            var result2 = this.evalExpr40(); //<-- 必须把＋运算parse为右递归，否则无法处理 1+2+3 这种情况            if (!result2[0]) {              return false;//整个表达式解析失败            }            tmp_value += result2[1];            {              this.assember.emitInstruction({type: "Mov", arg: "R0", arg1: "R1"});              this.assember.emitInstruction({type: "Pop", arg: "R0"});              this.assember.emitInstruction({type: "CallPrimitiveFunction", arg: "+"});            }         }else{//"-"            //右递归之前，需要将当前的R0压栈：            this.assember.emitInstruction({type: "Push", arg: "R0"});            //            var result2 = this.evalExpr40();            if (!result2[0]) {              return false;//整个表达式解析失败            }            tmp_value -= result2[1];            {              this.assember.emitInstruction({type: "Mov", arg: "R0", arg1: "R1"});              this.assember.emitInstruction({type: "Pop", arg: "R0"});              this.assember.emitInstruction({type: "CallPrimitiveFunction", arg: "-"});            }         }         //成功的情况：         this.discardLastTokenScanIndex();         //下一次循环：         if( !this.hasMoreTokens() )               return [true, tmp_value];//流已经结束，当前expr20子表达式解析完成（但不代表整体成功）         this.pushTokenScanIndex();         next_token = this.nextToken();      }//end while            assert( next_token!="+" && next_token!="-"); //非法期刊：1+2-      this.popTokenScanIndex();      return [true, tmp_value];   },   calc: function(){      this.emitValueTokenIfAny();//!!!      //输入全部在tokens里，视为一个正确的表达式输入流，后期也可以考虑错误处理      var result = this.evalExpr();//[success/fail, value]      {        alert(this.assember.toString());        var intercepter = new BytecodeIntercepter();        var interceptEvalResult = intercepter.eval(this.assember.getResult());        alert("字节码解释器求值结果="+interceptEvalResult+" \r\n直接递归下降解释执行结果="+result);      }      //assert( result[0] );      return result[1];   }}

parser的代码目前同时做2件事情：（1）老的直接在递归下降解析过程中求值，（2）新的通过Assembler生成字节码指令。

测试代码：

alert("7: sin(1+2)+cos(3-4)-tan(5*6)");var ac = new AdvancedCalculator();ac.emitButtons([ac.SIN, "(", "1", "+", "2", ")", "+", ac.COS, "(", "3", "-", "4", ")", "-", ac.TAN, "(", "5", "*", "6", ")"]);var result = ac.calc();assertEquals(result, Math.sin(1+2)+Math.cos(3-4)-Math.tan(5*6));

成功输出：

MovImm 1 R0
Push R0
MovImm 2 R0
Mov R0 R1
Pop R0
CallPrimitiveFunction +
CallPrimitiveFunction Sin
Push R0
MovImm 3 R0
Push R0
MovImm 4 R0
Mov R0 R1
Pop R0
CallPrimitiveFunction -
CallPrimitiveFunction Cos
Mov R0 R1
Pop R0
CallPrimitiveFunction +
Push R0
MovImm 5 R0
Push R0
MovImm 6 R0
Mov R0 R1
Pop R0
CallPrimitiveFunction *
CallPrimitiveFunction Tan
Mov R0 R1
Pop R0
CallPrimitiveFunction -

字节码解释器求值结果=7.086753510574282
直接递归下降解释执行结果=true,7.086753510574282

下一步工作：编写一个可视化界面？将JS代码格式化一下，然后变量命名再重构一下？加上AST生成和转换成JS运算表达式的支持？