js抽象语法树

发布时间:2019-12-29编辑:佚名阅读(1833)

JavaScript Parser,把js源码转化为抽象语法树的解析器。

浏览器会把js源码通过解析器转为抽象语法树,再进一步转化为字节码或直接生成机器码。

一般来说每个js引擎都会有自己的抽象语法树格式,Chrome的v8引擎,firefox的SpiderMonkey引擎等等,MDN提供了详细SpiderMonkey AST format的详细说明,算是业界的标准。

发展到现在可能不同的JavaScript Parser的AST格式会不同,或基于SpiderMonkey AST format,或重新设计自己的AST format,或基于SpiderMonkey AST format优化改进。通过优化抽象语法树,来使程序运行的更快,也是一种提高效率的方法。

常用的JavaScript Parser有:

Esprima

UglifyJS2

Traceur

Acorn

Shift

生成并使用抽象语法树

通过 esprima , 把一个名字为ast的空函数的源码生成一颗AST树:

var esprima = require('esprima');
var code = 'function ast(){}';
var ast = esprima.parse(code);

生成的抽象语法树长这样:

{
  "type": "Program",
  "body": [
    {
      "type": "FunctionDeclaration",
      "id": {
        "type": "Identifier",
        "name": "ast",
        "range": [          9,          12
        ]      },
      "params": [],
      "body": {
        "type": "BlockStatement",
        "body": [],
        "range": [          14,          16
        ]      },
      "generator": false,
      "expression": false,
      "range": [        0,        16
      ]    }
  ],
  "sourceType": "module",
  "range": [    0,    16
  ]}

通过 estraverse 遍历并且更新抽象语法树,把函数名称改为ast_awsome:

   var estraverse = require('estraverse');
    estraverse.traverse(ast, {
        enter: function (node) {
            node.name += "_awsome";
        }
    });

通过 escodegen 将AST重新生成为源码:

   var escodegen = require("escodegen");
    var regenerated_code = escodegen.parse(ast)

AST三板斧:

  1. 通过 esprima 把源码转化为AST

  2. 通过 estraverse 遍历并更新AST

  3. 通过 escodegen 将AST重新生成源码

    关键字: js 抽象语法树 ast


鼓掌

1

正能量

0

0

呵呵

0


评论区