Javascript AST 编译器的研究学习

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/

Javascript AST 编译器的研究学习

初步观察

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

  • 整个文件代表着一个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

Javascript AST 编译器的研究学习

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

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

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

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

CallExpression

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

Javascript AST 编译器的研究学习

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

callee : MemberExpression

Javascript AST 编译器的研究学习

这时候我们看到一个新的实例 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,嗯,从语法层面来看,是不可能的。
Javascript AST 编译器的研究学习

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

上一篇:使用ActionTrail Python SDK


下一篇:运用CSS变量