[AST基础篇]Scope作用域详解
目录
文章目录
- 目录
- 前言
- Scope 的用法
- scope.block
- scope.dump
- scope.getBinding
- scope.getOwnBinding
- scope.traverse
- scope.rename
- scope.hasBinding
- scope.hasOwnBinding
- scope.getAllBindings
- scope.hasReference
- scope.getBindingIdentifier
前言
这篇文章让我们来学习下 Babel
的 Scope
的一些相关知识,这样在还原混淆代码的时候能够更快速清晰的知道某个变量在哪里被引用了,这个变量在哪里定义的了。
首先要了解什么是 作用域
,具体可以自行百度,简单来说一个函数就是一个作用域,那么函数里面有几个变量,可以说这几个变量的作用域就是这个函数。
Scope 的用法
scope
提供了一些对象属性和方法,可以让我们方便地查找标识符的作用域,获取并修改标识符的所有引用,以及判断标识符是否为参数或常量。如果不是常量,也可以知道在哪里修改了它。
scope.block
scope.dump()
scope.getBinding()
scppe.getOwnBinding()
scope.traverse()
scope.rename()
scope.hasBinding()
scope.hasOwnBinding()
scope.getAllBindings()
scope.hasReference()
scope.getBindingIdentifier()
文章中的示例代码如下:
const a = 1000;
let b = 2000;
let obj = {name: 'mankvis',add: function (a) {a = 400;b = 300;let e = 700;function demo() {let d = 600;}demo();return a + a + b + 1000 + obj.name;},
}
obj.add(100);
scope.block
scope.block
属性可以用来获取标识符的作用域,返回 Node
对象,使用方法分为两种情况:变量
和 函数
。以下为标识符是 变量
的情况下,示例代码如下:
const ast = parser.parse(jsCode);traverse(ast, {Identifier(path) {if (path.node.name === 'e') {console.log(generator(path.scope.block).code)}}
})
/*
function (a) {a = 400;b = 300;let e = 700;function demo() {let d = 600;}demo();return a + a + b + 1000 + obj.name;
}
*/
上文说到即然 path.scope.block
返回的是 Node
对象,那么就可以使用 generator
来生成 Node
对象的代码。上述代码遍历所有的 Identifier
,当名字为 e
时,把当前节点的作用域转换为代码。变量 e
是定义在 obj.add
内部的,所以整个作用域是整个 add
函数。 但是如果遍历的是一个 函数
,那么它的作用域就会有些特别,来看下面这个例子:
traverse(ast, {FunctionDeclaration(path) {console.log(generator(path.scope.block).code)}
})/*
function demo() {let d = 600;
}
*/
上述代码遍历 FunctionDeclaration
,在原始代码中只有 demo()
这个函数符合要求,但是 demo
的作用域实际上应该是整个 add
的范围,因此输出与实际不符,这时需要去获取父级作用域。修改代码如下:
traverse(ast, {FunctionDeclaration(path) {console.log(generator(path.scope.parent.block).code)}
})/*
function (a) {a = 400;b = 300;let e = 700;function demo() {let d = 600;}demo();return a + a + b + 1000 + obj.name;
}
*/
scope.dump
scope.dump()
会得到自底向上的作用域与变量信息,示例代码如下:
traverse(ast, {FunctionDeclaration(path) {console.log('\n\n这里是函数', path.node.id.name + '()');path.scope.dump();}
})/*
这里是函数 demo()
------------------------------------------------------------
# FunctionDeclaration- d { constant: true, references: 0, violations: 0, kind: 'let' }
# FunctionExpression- a { constant: false, references: 2, violations: 1, kind: 'param' }- e { constant: true, references: 0, violations: 0, kind: 'let' }- demo { constant: true, references: 1, violations: 0, kind: 'hoisted' }
# Program- a { constant: true, references: 0, violations: 0, kind: 'const' }- b { constant: false, references: 1, violations: 1, kind: 'let' }- obj { constant: true, references: 2, violations: 0, kind: 'let' }
------------------------------------------------------------
*/
上面的内容是使用 scope.dump()
的输出内容,看着比较多,这里说下怎么看
#
开头的是每一个作用域,上面有三个作用域,分别是FunctionDeclaration
、FunctionExpression
和Program
。-
开头的是每一个绑定(binding),每一个binding
都会包含几个关键信息,分别是:constant
、references
、violations
、kind
。constant
表示是否为常量,为布尔值references
表示被引用的次数violations
表示被重新定义的次数kind
表示声明类型,param 参数、hoisted 提升、var 变量、local 内部。
以上的的这些属性并不是全部,后面介绍 Binding
对象的时候再以补充。
对于scope.dump()单次输出都是自底向上的,先输出当前作用域,再输出父级作用域,再输出父级的父级的作用域...直到顶级作用域
scope.getBinding
scope.getBinding
接收一个类型为字符串的参数,用来指定要获取某个标识符的绑定。为了更直观的说明绑定的含义,先看下面这段代码,遍历 FunctionDeclaration
,符合要求的只有 demo
,然后获取当前节点下的绑定 a
,直接输出绑定信息:
traverse(ast, {FunctionDeclaration(path) {let bindingA = path.scope.getBinding('a');console.log(bindingA);},
})/*
Binding {identifier: Node {type: 'Identifier', ..., name: 'a'},scope: Scope {...,block: Node {type: 'FunctionExpression', ...}},path: NodePath {...},kind: 'param',constantViolations: [...],constant: false,referencePaths: [...],referenced: true,references: 2}
}
*/
getBinding中传入的值必须是当前节点能够引用到的标识符名,如果传入一个不存在的 g ,这个标识符并不存在,或者说当前节点引用不到,那么 getBinding 会返回 undefined
可是 FunctionDeclaration 的作用域只是 demo 本身,为什么能找到 a 呢,这是因为 demo 本身的作用域是 add 这个函数,所以是可以直接找到 a 的
以上输出内容中的属性 constant
、 references
和 kind
之前已经介绍过了,其他属性介绍如下:
identifier
是a
标识符的 Node 对象path
是a
表示符的 Path 对象kind
表示这是一个参数,但是并不代表就是当前 demo 的参数。实际上原始代码中,a
是add
的参数(当函数中局部变量与全局变量重名时,使用的是局部变量)referencePaths
假设标识符被引用,referencePaths 中会存放所有引用该标识符的节点的 Path 对象constantViolations
假如标识符被修改,那么 constantViolations 中会存放所有修改该标识符的节点的 Path 对象
另外可以看出,Binding
中也有 scope
,因为获取的是 a
的 Binding
,所以是 a
的 scope
。将其中的 block
节点转换为代码后,可以看出它的作用域范围就是 add
。值得一提的是,加入获取的是 demo
的 Binding
,将其中的 block
节点转换为代码后,输出的也是 add
。因此获取函数作用域也可以用如下方式:
traverse(ast, {FunctionExpression(path) {let bindingA = path.scope.getBinding('a');let bindingDemo = path.scope.getBinding('demo');console.log(bindingA.referenced);console.log(bindingA.references);console.log(generator(bindingA.scope.block).code);console.log(generator(bindingDemo.scope.block).code);},
})/*
true
2
下面代码输出2次
function (a) {a = 400;b = 300;let e = 700;function demo() {let d = 600;}demo();return a + a + b + 1000 + obj.name;
}*/
scope.getOwnBinding
scope.getOwnBinding
该函数用于获取当前节点自己的绑定,也就是不包含父级作用域中定义的标识符的绑定,但是该函数会得到子函数中定义的标识符的绑定,看下面的例子:
function TestOwnBinding(path) {path.traverse({Identifier(p) {let name = p.node.name;console.log(name, !!p.scope.getOwnBinding(name));}});
}traverse(ast, {FunctionExpression(path) {TestOwnBinding(path);},
})/*
a true
a true
b false
e true
demo false
d true
demo true
a true
a true
b false
obj false
name false*/
上述代码遍历 FunctionExpression
节点,当前案例中符合要求的只有 add
函数,然后遍历该函数下所有的 Identifier
,输出标识符名和 getOwnBinding
的结果,查看输出结果,可以发现子函数 demo
中定义的 d
变量,该变量也可以通过 getOwnBinding
得到,也就是说,如果只想获取当前节点下定义的标识符,而不设计子函数的话,还需要进一步判断,可以通过判断标识符作用域是否与当前函数一致来确定
,如下:
function TestOwnBinding(path) {path.traverse({Identifier(p) {let name = p.node.name;let binding = p.scope.getBinding(name);binding && console.log(name, generator(binding.scope.block).code === path.toString());}});
}traverse(ast, {FunctionExpression(path) {TestOwnBinding(path);},
})/*
a true
a true
b false
e true
demo true
d false
demo true
a true
a true
b false
obj false*/
上述代码通过 binding.scope.block
获取标识符作用域,转换代码后,在与当前节点代码进行比较,就可以确定是否是当前函数中定义的标识符。因为子函数中定义的标识符,作用域范围是子函数本身,添加判断作用域代码后,使用 getBinding
和 getOwnBinding
的结果是一样的。
scope.traverse
scope.traverse
方法可以用来遍历作用域中的节点。可以使用 Path
对象中的 scope
,也可以使用 Binding
中的 scope
,笔者推荐使用后者,下面来看下例子:
traverse(ast, {FunctionDeclaration(path) {let binding = path.scope.getBinding('a');binding.scope.traverse(binding.scope.block, {AssignmentExpression(p) {if (p.node.left.name === 'a') {p.node.right = types.numericLiteral(500);}},})}
})/*
const a = 1000;
let b = 2000;
let obj = {name: 'mankvis',add: function (a) {a = 500;b = 300;let e = 700;function demo() {let d = 600;}demo();return a + a + b + 1000 + obj.name;}
};
obj.add(100);*/
原始代码中, a = 400
,上述代码的作用是将它改为 a = 500
,假如是从 demo
这个函数入手,那么只要获取 demo
函数中的 a
的 Binding
,然后遍历 binding.scope.block(也就是 a 的作用域)
,找到赋值表达式是 left
为 a
的,将对应的 right
改掉。
scope.rename
可以使用 scope.rename
将标识符进行重命名,这个方法会同时修改所有引用该标识符的地方,例如将 add
函数中的 b
变量重命名为 x
,代码如下:
traverse(ast, {FunctionExpression(path) {let binding = path.scope.getBinding('b');binding.scope.rename('b', 'x');},
})/*
const a = 1000;
let x = 2000;
let obj = {name: 'mankvis',add: function (a) {a = 400;x = 300;let e = 700;function demo() {let d = 600;}demo();return a + a + x + 1000 + obj.name;}
};
obj.add(100);*/
上述方法很方便的就把 b
改为了 x
,但是如果随便指定一个变量名,可能会与现有标识符发生命名冲突,这时可以使用 scope.generateUidIdentifier
来生成一个标识符,生成的标识符不会与任何本地的标识符相冲突,代码如下:
traverse(ast, {FunctionExpression(path) {path.scope.generateUidIdentifier('uid');// Node {type: "Identifier", name: "_uid"}path.scope.generateUidIdentifier('_uid2');// Node {type: "Identifier", name: "_uid2"}},
})
使用这两种方法,就可以实现一个简单的标识符混淆的案例,代码如下:
traverse(ast, {Identifier(path) {path.scope.rename(path.node.name,path.scope.generateUidIdentifier('_0x2ba6ea').name);},
})/*
const _0x2ba6ea = 1000;
let _0x2ba6ea15 = 2000;
let _0x2ba6ea18 = {name: 'mankvis',add: function (_0x2ba6ea14) {_0x2ba6ea14 = 400;_0x2ba6ea15 = 300;let _0x2ba6ea9 = 700;function _0x2ba6ea12() {let _0x2ba6ea11 = 600;}_0x2ba6ea12();return _0x2ba6ea14 + _0x2ba6ea14 + _0x2ba6ea15 + 1000 + _0x2ba6ea18.name;}
};_0x2ba6ea18.add(100);
*/
实际上标识符混淆方案还可以做的更复杂,例如,上述代码中,如果在多定义一些函数,会发现各函数之间的局部变量名是不重复的。加入把各个函数之间的局部变量定义成重复的,甚至还可以让函数中的局部变量跟当前函数中没有引用到的全局变量重名,原始代码中的全局变量 a
和 add
中的 a
参数。
scope.hasBinding
该方法查询某标识符是否有绑定,返回 true
或者 false
。可以用 scope.getBinding("a")
代替,scope.getBinding("a")
返回 undefined
,等同于 scope.hasBinding("a")
返回 false
。
scope.hasOwnBinding
该方法查询当前节点中是否有自己的绑定,返回布尔值,例如,对于 demo
函数,OwnBinding
只有一个 d
,函数名 demo
虽然也是标识符,但不属于 demo
函数的 OwnBinding
范畴,是属于它的父级作用域中的,如:
traverse(ast, {FunctionDeclaration(path) {console.log(path.scope.parent.hasOwnBinding('demo'));},
})/*
true
*/
同样可以使用 scope.getOwnBinding("a")
代替它,scope.getOwnBinding("a")
返回 undefined
,等同于 scope.hasOwnBinding("a")
返回 false
。原始代码中 scope.hasOwnBinding("a")
也是通过 scope.getOwnBinding("a")
来实现的。
scope.getAllBindings
该方法获取当前节点的所有绑定,会返回一个对象。该对象以标识符名为属性名,对应的 Binding
为属性值,代码如下:
traverse(ast, {FunctionDeclaration(path) {console.log(path.scope.getAllBindings());}
})/*
[Object: null prototype] {d: Binding {...},a: Binding {...},demo: Binding {...},e: Binding {...},b: Binding {...},obj: Binding {...},
}
*/
遍历每一个 Binding
,代码如下:
traverse(ast, {BlockStatement(path) {console.log('\n此块节点源码: \n', path.toString());let bindings = path.scope.bindings;console.log('作用域内被绑定数量:', Object.keys(bindings).length);for (const bindingsKey in bindings) {console.log('名字', bindingsKey);let binding_ = bindings[bindingsKey];console.log('类型:', binding_.kind);console.log('定义:', binding_.identifier);console.log('是否常量:', binding_.constant);console.log('被修改信息记录:', binding_.constantViolations);console.log('是否被引用:', binding_.referenced);console.log('被引用次数:', binding_.references);console.log('被引用信息NodePath记录', binding_.referencePaths);}console.log('-------------------------------------');},
})
scope.hasReference
scope.hasReference("a")
表示查询当前节点中是否有 a
标识符的引用,返回布尔值。
scope.getBindingIdentifier
scope.getBindingIdentifier("a")
表示获取当前节点中绑定的 a
的标识符,返回 Identifier
的 Node
对象。同样,这个方法也有 Own
版本,为 scope.getOwnBindingIdentifier("a")
。
[AST基础篇]Scope作用域详解相关推荐
- 【linux】循序渐进学运维-基础篇-netstat命令详解
大家好,我是高胜寒,本文是Linux运维-循序渐进学运维-基础篇的第62篇文章 文章目录 前言 一. netstat命令详解 作用 1. 常用参数 2. 命令使用 1) 参数作用详解 2) 网络连接状 ...
- BSGS(基础篇,题目+详解)
基础篇 问题: 思路: 模板: 题目: 基础篇 问题: 给出 a , b , p a,b,p a,b,p,其中 g c d ( a , p ) = 1 gcd(a,p)=1 gcd(a,p)=1,求 ...
- Java基础篇:内部类详解
目录: 一.内部类的好处: 二.成员内部类: 三.局部内部类: 四.静态内部类: 五.匿名内部类: 六.总结: 内部类:可以将一个类的定义放在另一个类的定义内部,这就是内部类. 内部类是一个编译时概念 ...
- Java修炼之路——基础篇——Java集合类详解2
Set和List区别?Set如何保证元素不重复? Set.List都实现了Collection接口,List是有序的列表,Set是无序的集合(TreeSet有序) List实现类: ArrayList ...
- Java修炼之路——基础篇——Java集合类详解1
SynchronizedList和Vector的区别 java.util.Vector java.util.Collections.$SynchronizedList Vector用同步方法,Sync ...
- Vue.js 源码分析(九) 基础篇 生命周期详解
先来看看官网的介绍: 主要有八个生命周期,分别是: beforeCreate.created.beforeMount.mounted.beforeupdate.updated .beforeDes ...
- 【备战春招/秋招系列】美团Java面经总结进阶篇 (附详解答案)
<!-- MarkdownTOC --> 一 消息队列MQ的套路 1.1 介绍一下消息队列MQ的应用场景/使用消息队列的好处 ①.通过异步处理提高系统性能 ②.降低系统耦合性 1.2 那么 ...
- 【备战春招/秋招系列】美团Java面经总结终结篇 (附详解答案)
该文已加入开源项目:JavaGuide(一份涵盖大部分Java程序员所需要掌握的核心知识的文档类项目,Star 数接近 14 k).地址:https://github.com/Snailclimb.. ...
- 【备战春招/秋招系列】美团Java面经总结终结篇 (附详解答案) 1
该文已加入开源项目:JavaGuide(一份涵盖大部分Java程序员所需要掌握的核心知识的文档类项目,Star 数接近 14 k).地址:https://github.com/Snailclimb/J ...
最新文章
- Tomcat高级部分-使用特定模块和软件反向代理请求到后端tomcat实现负载均衡和session保持...
- sql运算符_SQL运算符
- wxcharts.js结合java后台在小程序中的使用(柱状图,其它同理)
- 教你如何用C语言做一个简单的贪吃蛇
- 818释放规模效能,苏宁易购全场景智慧零售迈上新台阶
- Asterisk与zoiper搭建
- tipask二次开发总结_tipask二次开发总结.docx
- 为什么打开edge浏览器,就出来qq导航,hao123页面等等!
- 3dsmax UVW展开,然后在 BodyPaint 3D 中进行绘制
- 网络营销推广的主要工作
- PHP Class SoapClient not found解决方法
- (转)FFmpeg 基本用法
- 【jackson异常】com.fasterxml.jackson.databind.JsonMappingException异常处理方法
- match against
- MATLAB-基于灰色神经网络的预测算法研究(订单需求预测)
- CSS3 过渡特性创建信封效果的联系表单
- .net 应用服务GC时服务挂起几秒问题及解决办法
- linux卸载先驱的命令是,【单选题】在Linux中,若要在同一行书写多条命令,命令之间应使用符号()分隔A. 转义字符\\ B. 分号; C. , D. 空格...
- FILE *fp fopen 参数
- 《驴得水》角色分析和感悟总结