JavaScript中的 抽象语法树 AST

AST

  • 抽象语法树(Abstract Syntax Tree)也称为AST语法树,指的是源代码语法所对应的树状结构。也就是说,一种编程语言的源代码,通过构建语法树的形式将源代码中的语句映射到树中的每一个节点上。


    示意图.png
  • 而在JavaScript中,JS引擎会把源代码转换成AST,解释器再基于AST生成字节码,提供给计算机。顺便说一句,JS引擎中还有优化编译器,它会花费更多的时间处理AST,生成优化后的机械码(比解释器interpreter生成的字节码更高效)


    image.png
  • 程序代码本身可以被映射成为一棵语法树,而通过操纵语法树,我们能够精准的获得程序代码中的每一个精确的节点。例如声明语句,赋值语句,而这是用正则表达式所不能准确体现的地方。esprima提供了一个在线解析JavaScript代码的地址,可以清楚地观察到js代码被转化为JSON格式,由一个个具体的符号组成

  • AST Explorer 也可以让你对 AST 节点有一个更好的感性认识:AST会把代码本身(body)和注释(comments)分开,然后代码语句也会进行区别:函数声明、变量声明、表达式语句等等。

作用

  • 抽象语法树的作用非常的多,比如编译器、IDE、压缩优化代码等。在JavaScript中,虽然我们并不会常常与AST直接打交道,但却也会经常的涉及到它。例如使用UglifyJS来压缩代码或babel转换代码,实际这背后就是在对JavaScript的抽象语法树进行操作。


    示意图2.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,179评论 25 709
  • JavaScript绝对是最火的编程语言之一,一直具有很大的用户群,随着在服务端的使用(NodeJs),更是爆发了...
    不去解释阅读 7,032评论 1 16
  • 1.简单的早餐后,迎着朝阳和细雨(独特的风景)去Brighton University。 2.上公交买票时,司机问...
    Jwwvking阅读 3,437评论 1 1
  • 吴伯凡认为人类历史其实是一部通信发展史,早期人类的信息传递依赖于物理位移,飞鸽传书,马拉松的由来,都是例子。而现...
    你是自由幸福的阅读 1,820评论 0 0