Javascript AST 编译器的研究学习

  1. 云栖社区>
  2. 博客列表>
  3. 正文

Javascript AST 编译器的研究学习

得得啊啊 2018-08-10 09:53:14 浏览613 评论0

摘要: # Javascript AST 编译器的研究学习 ## Source: ```javascript 'use strict'; Object.defineProperty(exports, "__esModule", { value: true }); var _IceInteractContainer = require('./InteractContaine

Javascript AST 编译器的研究学习

Source:

'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});

var _IceInteractContainer = require('./InteractContainer');

var _IceInteractContainer2 = _interopRequireDefault(_IceInteractContainer);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

if (location.host === "xxxx.taobao.com") {
    lib.x = 10
}

exports.default = _IceInteractContainer2.default;
module.exports = exports['default'];

AST:

https://astexplorer.net/

image

初步观察

可以得到一些明确的信息:

  • 整个文件代表着一个Program
  • JavaScript的代码过程被解释成一个数组,并在body属性里

还有很多未知的信息,我就暂时先忽略了。

Body

可以看到,里面有ExpressionStatement、VariableDeclaration、FunctionDeclaration、IfStatement这些实例。
我们对应到源代码中就不难理解了:

'use strict';  // AST:ExpressionStatement

Object.defineProperty(exports, "__esModule", { // AST:ExpressionStatement
    value: true
});

var _IceInteractContainer = require('./InteractContainer'); // AST:VariableDeclaration

var _IceInteractContainer2 = _interopRequireDefault(_IceInteractContainer); // AST:VariableDeclaration

// AST:FunctionDeclaration
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

if (location.host === "xxxx.taobao.com") { // AST:IfStatement
    lib.x = 10
}

exports.default = _IceInteractContainer2.default; // AST:ExpressionStatement
module.exports = exports['default']; // AST:ExpressionStatement

看来是将JS进行了归纳,表达式语句、变量描述、函数描述、IF语句等等。
因此不难想象,应该还有While语句等等吧。

ExpressionStatement

Literal

    
    'use strict';  // AST:ExpressionStatement

image

展开ExpressionStatement,可以看到有个 expression 属性,这条表达式主要的信息也就在这了。
值得注意的是 expression 指向的是一个 Literal 实例.

  • type:文本
  • value:值"use strict"

rawValue 和 raw 又有啥区别?(未知)

看起来很简单,一个字符串文本执行语句。
那再继续看看一个函数调用的语句将会变成什么样。

CallExpression

Object.defineProperty(exports, "__esModule", { // AST:ExpressionStatement
    value: true
});

image

可以看到 CallExpression 实例有个 calleearguments,代表着谁在调用和参数是谁。

callee : MemberExpression

image

这时候我们看到一个新的实例 MemberExpression
这是一个成员表达式,其实我们经历过这些探究之后,不难想象有什么能够编译成 MemberExpression,比如:
alert(hello.word)里面的hello.word就会编译成MemberExpression

MemberExpression

从上图可以看到,MemberExpression实例有两个关键的属性,Objectproperty,粗暴的理解就是,'.'(点)前面的就是Object,后面的就是property

但是,hello[0] 的情况呢?
这个就有点意思了,hello[0] 也会被编译成 MemberExpression的实例。
这个可以自己尝试和对比下看看。

然后可以看到Object.defineProperty被拆分成了两个Identifier实例,分别放在了Objectproperty属性里面.

Identifier

这个标识符类,关键的就是 name属性了。
总结下其实可以得出什么东西会别编译成Identifier, 例如:

var a = new Function;
a; // AST:Identifier

arguments

值得一说的是,我这里说的是参数是谁,也就意味着,他可以是任何其他的实例,可能是一个 Literal,可能还是一个CallExpression,又或者是MemberExpression, 但它应该不会是 VariableDeclaration ,IfStatement,嗯,从语法层面来看,是不可能的。
image

嗯。现在看来这个 ObjectExpression是没有出现和分析过的,不过按照笔者的思路,也可以尝试去看看这个实例了。~

用云栖社区APP,舒服~

【云栖快讯】诚邀你用自己的技术能力来用心回答每一个问题,通过回答传承技术知识、经验、心得,问答专家期待你加入!  详情请点击

网友评论

得得啊啊
文章5篇 | 关注10
关注
阿里云机器学习是基于阿里云分布式计算引擎的一款机器学习算法平台。用户通过拖拉拽的方式可视化的... 查看详情
兼容Jenkins标准,可提供快速可靠的持续集成与持续交付服务。基于容器技术和阿里云基础服务... 查看详情
业内领先的面向企业的一站式研发提效平台(研发效能),通过项目流程管理和专项自动化提效工具,能... 查看详情
为您提供简单高效、处理能力可弹性伸缩的计算服务,帮助您快速构建更稳定、安全的应用,提升运维效... 查看详情
阿里云总监课正式启航

阿里云总监课正式启航