AST基础

John Who

2025-02-20

前端逆向

介绍

AST（AbstractSyntaxTree，抽象语法树）是一种树状结构，用于表示代码的语法结构.它是源代码在编译或解释执行之前的中间表示，能够捕获代码的语法规则和层级关系.

在AST中，代码的每个语法元素（如变量、函数、运算符等）都会被解析成一个节点，节点之间的层次结构表现出代码的嵌套关系.

demo

let obj = {
  name:'John',
  add:function(a,b){
    return a+b+1000;
  },
  mul:function(a,b){
    return a*b;
  },
};

解析成语法树如下https://astexplorer.net/

可以换成json来看

{
  "type": "Program",
  "start": 0,
  "end": 118,
  "body": [
    {
      "type": "VariableDeclaration",
      "start": 0,
      "end": 118,
      "declarations": [
        {
          "type": "VariableDeclarator",
          "start": 4,
          "end": 117,
          "id": {
            "type": "Identifier",
            "start": 4,
            "end": 7,
            "name": "obj"
          },
          "init": {
            "type": "ObjectExpression",
            "start": 10,
            "end": 117,
            "properties": [
              {
                "type": "Property",
                "start": 14,
                "end": 25,
                "method": false,
                "shorthand": false,
                "computed": false,
                "key": {
                  "type": "Identifier",
                  "start": 14,
                  "end": 18,
                  "name": "name"
                },
                "value": {
                  "type": "Literal",
                  "start": 19,
                  "end": 25,
                  "value": "John",
                  "raw": "'John'"
                },
                "kind": "init"
              },
              {
                "type": "Property",
                "start": 29,
                "end": 72,
                "method": false,
                "shorthand": false,
                "computed": false,
                "key": {
                  "type": "Identifier",
                  "start": 29,
                  "end": 32,
                  "name": "add"
                },
                "value": {
                  "type": "FunctionExpression",
                  "start": 33,
                  "end": 72,
                  "id": null,
                  "expression": false,
                  "generator": false,
                  "async": false,
                  "params": [
                    {
                      "type": "Identifier",
                      "start": 42,
                      "end": 43,
                      "name": "a"
                    },
                    {
                      "type": "Identifier",
                      "start": 44,
                      "end": 45,
                      "name": "b"
                    }
                  ],
                  "body": {
                    "type": "BlockStatement",
                    "start": 46,
                    "end": 72,
                    "body": [
                      {
                        "type": "ReturnStatement",
                        "start": 52,
                        "end": 68,
                        "argument": {
                          "type": "BinaryExpression",
                          "start": 59,
                          "end": 67,
                          "left": {
                            "type": "BinaryExpression",
                            "start": 59,
                            "end": 62,
                            "left": {
                              "type": "Identifier",
                              "start": 59,
                              "end": 60,
                              "name": "a"
                            },
                            "operator": "+",
                            "right": {
                              "type": "Identifier",
                              "start": 61,
                              "end": 62,
                              "name": "b"
                            }
                          },
                          "operator": "+",
                          "right": {
                            "type": "Literal",
                            "start": 63,
                            "end": 67,
                            "value": 1000,
                            "raw": "1000"
                          }
                        }
                      }
                    ]
                  }
                },
                "kind": "init"
              },
              {
                "type": "Property",
                "start": 76,
                "end": 114,
                "method": false,
                "shorthand": false,
                "computed": false,
                "key": {
                  "type": "Identifier",
                  "start": 76,
                  "end": 79,
                  "name": "mul"
                },
                "value": {
                  "type": "FunctionExpression",
                  "start": 80,
                  "end": 114,
                  "id": null,
                  "expression": false,
                  "generator": false,
                  "async": false,
                  "params": [
                    {
                      "type": "Identifier",
                      "start": 89,
                      "end": 90,
                      "name": "a"
                    },
                    {
                      "type": "Identifier",
                      "start": 91,
                      "end": 92,
                      "name": "b"
                    }
                  ],
                  "body": {
                    "type": "BlockStatement",
                    "start": 93,
                    "end": 114,
                    "body": [
                      {
                        "type": "ReturnStatement",
                        "start": 99,
                        "end": 110,
                        "argument": {
                          "type": "BinaryExpression",
                          "start": 106,
                          "end": 109,
                          "left": {
                            "type": "Identifier",
                            "start": 106,
                            "end": 107,
                            "name": "a"
                          },
                          "operator": "*",
                          "right": {
                            "type": "Identifier",
                            "start": 108,
                            "end": 109,
                            "name": "b"
                          }
                        }
                      }
                    ]
                  }
                },
                "kind": "init"
              }
            ]
          }
        }
      ],
      "kind": "let"
    }
  ],
  "sourceType": "module"
}

program属性的body属性是一个数组，该数组存放js代码的代码行

VariableDeclaration是变量声明，意思是这段js代码是变量声明语句，kind意思是变量声明使用的关键字，这里是let

这里的declarations是个数组，数组元素的个数和声明变量的个数一致

关注declarations下的id和init，id里面的name属性是变量名，init内是变量初始化的值，init的properties是键值对，是属性名和属性值

关注a+b+1000在AST中怎么表示的，按右边的+分隔，分成a+b和1000，再把a+b按+分隔，分成a和b

babel库可以对AST语法进行解析，后面都是用babel库进行操作的

代码的基本结构

demo

把原始代码保存成一个文件，名为demo.js，注意保存成utf-8编码的，另外新建一个文件，用来解析demo.js

这里的demo.js就是

let obj = {
  name:'John',
  add:function(a,b){
    return a+b+1000;
  },
  mul:function(a,b){
    return a*b;
  },
};

安装babel库

1	npm install @babel/core

AST.js

const fs = require('fs');
const parser = require("@babel/parser");
const traverse = require("@babel/traverse").default;
const t = require("@babel/types");
const generator = require("@babel/generator").default;

const jscode = fs.readFileSync("./demo.js", {
    encoding: "utf-8"
});
let ast = parser.parse(jscode);

//在这里对AST进行一系列的操作

let code = generator(ast).code;
fs.writeFile('./demoNew.js', code, (err)=>{});

总的来说逻辑如下

(1)fs用来读写本地文件，require之后赋值给了fs.
(2)@babel/parser用来将JS代码转换成AST，require之后赋值给了parser.
(3)@babel/traverse用来遍历AST中的节点，require之后把其中的default赋值给了traverse.
(4)@babel/types判断节点类型和生成新的节点等，require之后赋值给了t.
(5)@babel/generator用来把AST转换成JS代码，require之后把其中的default赋值给generator.
从上述代码中，可以看出AST处理JS文件的基本步骤，读取JS文件-->解析成AST-->对节点进行一系列的增删改査-->生成JS代码->保存到新文件中

parser和generator

这两个组件的作用刚好是相反的.parser组件用来将JS代码转换成AST，generator用来将AST转换成JS代码.

使用letast=parser.parse(jscode);即可完成JS代码转换到AST的过程，这时候把ast输出来，就是跟网页中解析出来的一样的结构，输出前通常先使用JSON.stringify把对象转json数据，例如，console.log(JSON.stringify(ast，null，2)).另外，parser的parse方法，其实是有第二个参数的

1
2
3

letast=parser.parse(jscode，{
	sourceType:"module"，
});

sourceType默认是script，但是当解析的JS代码中，含有import、export等关键字的时候，需指定sourceType为module.不然会报错

letcode=generator(ast).code;，这里的generator其实也有其他参数

//retainLines表示是否使用与源代码相同的行号，默认true
//comments表示是否保留注释，默认true
//compact表示是否压缩代码，默认false
let code=generator(ast，{
	retainLines:false，
	comments:false，
	compact:true
}).code;
console.log(code);

traverse与visitor

demo

先看demo，需要把下面代码中的a变量改成x变量

let obj = {
  name:'John',
  add:function(a,b){
    return a+b+1000;
  },
  mul:function(a,b){
    return a*b;
  },
};

把上面的代码拿到ast网站上解析一下，需要知道a变量在ast中长什么样，在ast语法树中，a变量是使用Identifier节点表示的

"params": [
    {
        "type": "Identifier",
        "start": 42,
        "end": 43,
        "name": "a"
    },
    {
        "type": "Identifier",
        "start": 44,
        "end": 45,
        "name": "b"
    }
],

traverse用来遍历语法树中所有的节点的，节点可以理解为数组中的成员，visitor则定义了遇到什么节点该做什么修改

let visitor={};
visitor.Identifier=function(path){
	//console.log(path.node.name);
	if(path.node.name=='a'){
		path.node.name='x';
	}
}
traverse(ast，visitor);

traverse的第一个参数是ast语法树，visitor是一个自定义的对象，该对象可以自己定义一些方法，方法名和节点名一样，比如要处理的是Identifer节点，那么方法名就是Identifer，属性是一个函数，函数的参数是path对象，什么是path对象后面会说，通过path对象可以对节点进行修改

当然上面的代码是不严谨的，因为不可能只根据变量名去改，作用域怎么办？

两者的作用

traverse组件用来遍历AST，简单地说就是把AST上的各个节点都走一遍，但是单纯的把节点都走一遍是没有意义的，所以taverse需要配合visitor使用.
visitor是一个对象，里面可以定义一些方法，用来过滤节点.概念是抽象的，接下来用个实际案例试一下traverse和visitor的效果：

let visitor={};
visitor.FunctionExpression=function(path){
	console.log("john");
};
traverse(ast，visitor);

先是声明对象，对象的名字可以随意，然后给对象增加了一个名为FunctionExprcssion的方法，这个名字是需要遍历的节点类型，注意大小写.

traverse会遍历所有的节点，当节点类型为FunctionExpression时，调用visitor中相应的方法，如果想要处理其他节点类型例如Identifier.可以在visitor中继续定义方法，以Identifer命名即可.

visitor中的方法接收一个参数，traverse在遍历的时候，会把当前节点的Path对象传给它，传过来的是Path对象而非节点(node)

最后把visitor作为第二个参数传到traverse里面，传给traverse的第一个参数是整个ast.这段代码的意思是，从头开始遍历ast中的所有节点，过滤出FunctionExpression节点，执行相应的方法，在原始代码中有两个FunctionExpression节点，因此会输出两次John.

visitor的三种定义方式

visitor的定义方式还有三种

const visitor1={
	FunctionExpression:functicn(path){
	console.log("john");
	}
}

const visitor2={
	FunctionExpression(path){
		console.log("john");
}
};

const visitor3={
	FunctionExpression:{
		enter(path}{
			console.log("john"};
		}
	}
}

在visitor3中，存在一个重要的enter，在遍历节点过程中，实际上有两次机会来访问一个节点，即进入节点时(enter)与退出节点时(exit)，比如这样定义

let visitor = {};
visitor.Identifier = {
    enter: function (path) {
        //console.log(path.node.name);
        if (path.node.name == 'a') {
            path.node.name = 'x';
        }
        console.log(path.node.name, 'John enter');
    },
    exit: function (path) {
        console.log(path.node.name, 'John exit');
    }
};
traverse(ast, visitor);

以原始代码中的add函数为例，节点的遍历过程可描述如下:

进入FunctionExpression
	进入 Identifier(params[0])走到尽头
	退出 Identifier(params[0])
	进入 Identifier(parens[1])走到尽头
	退出 Identifier(params[1])
	进入 BlockStatement(body)
		进入 ReturnStatement(body)
			进入 BinaryExpression(argument)
				进入 BinaryExpression(left)
					进入 Identifier(left)走到尽头
					退出 Identifier(left)
					进入 Identifier(rignt)走到尽头
					退出 Identifier(rignt)
				退出 BinaryExpression(left)
				进入 NumericLiteral(right)走到尽头
				退出 NumericLiteral(right)
			退出 BinaryExpression(argument)
		退出 ReturnStatement(body)
	退出 BlockStatement(body)
退出FunctionExpression

可以看出来是深度优先的搜索，正确的选择节点处理时机，有助于提高代码效率，可以看出traverse是一个深度优先的遍历过程，因此，如果存在父子节点，那么enter的处理时机是先处理父节点，再处理子节点，与此相反，exit的处理时机是先处理子节点，再处理父节点，traverse 默认就是在 enter时候处理，如果要在exit时候处理，必须在visitor中写明.

还可以把同一个函数用在多个节点上

const visitor = {
    "FunctionExpression|BinaryExpression"(path){
        console.log(path.node.type, "John");
    }
};
traverse(ast, visitor);

退出和进入的时候对同一个节点可以执行多个函数

function test1(path) {
    console.log(path.node.name, 'John exit', 'test1');
}
function test2(path) {
    console.log(path.node.name, 'John exit', 'test2');
}
let visitor = {};
visitor.Identifier = {
    exit: [test1, test2]
};
traverse(ast, visitor);

现在还有一个问题，如果要修改变量的名有重名怎么办？我想修改指定作用域内的变量名，比如我只想修改函数内部的a变量

let a=1000;
let obj = {
    a:200,
    name:'John',
    add:function(a,b){
        return a+b+1000;
    },
    mul:function(a,b){
        return a*b;
    },
};

指定一下遍历的是FunctionExpression节点内的子节点，并且是Identifier子节点

let visitor = {};
visitor.FunctionExpression = {
    enter: function (path) {
        let myVisitor = {
            Identifier(path){
                if (path.node.name === 'a') {
                    path.node.name = 'x';
                }
            }
        };
        path.traverse(myVisitor);
    }
};
traverse(ast, visitor);

现在来解释一下上面的语法

（1）为什么enter里又定义了myVisitor?
原因：
enter只会在进入某个FunctionExpression作用域时触发。
但函数内部的Identifier（变量名）不会自动被FunctionExpression访问到，所以需要手动调用path.traverse(myVisitor)再次遍历函数体内部。
myVisitor 里定义了 Identifier(path) {}，用于处理 函数内部的所有标识符（变量名）
如果不这样做，path.node遍历到的就是FunctionExpression，这个节点没有name属性

（2）Identifier(path){} 这个语法是什么？
Identifier(path) {
    if (path.node.name === 'a') {
        path.node.name = 'x';
    }
}
这是 Babel AST 访问者模式（Visitor Pattern） 的一种写法，相当于：
{
    Identifier: function(path) {
        if (path.node.name === 'a') {
            path.node.name = 'x';
        }
    }
}
Identifier 代表 访问 AST 里所有 Identifier 类型的节点（即所有变量名）。
path 是 Babel 提供的 路径对象（NodePath），用于操作 AST 。
path.node.name 就是变量名，如 a、b、name。

path.traverse还有第二个参数，是参数列表，比如现在想把代码里函数的第一个参数都修改为x，怎么办？

let visitor = {};
visitor.FunctionExpression = {
    enter: function (path) {
        let myVisitor = {
            Identifier(path){
                if (path.node.name === this.paramName) {
                    path.node.name = 'x';
                }
                console.log('Identifier', this.paramName);
            }
        };
        let paramName = path.node.params[0].name;
        path.traverse(myVisitor, {paramName});
    }
};
traverse(ast, visitor);

现在对上面的代码进行解释

（1）为什么不能直接用 path.node.params[0].name，而要提前存入 paramName 并通过 path.traverse(myVisitor, { paramName }) 传递
主要原因是：

path 在 traverse 内部会改变，指向不同的节点
在 FunctionExpression 的 enter 里：path 指向 函数本身的 AST 节点（FunctionExpression）,path.node.params[0].name 获取的是函数的第一个参数名。
但是，在 traverse(myVisitor) 之后，path 变成了 Identifier 节点的路径（变量名的路径），path.node.name 代表当前正在访问的变量名，而不是 FunctionExpression 的参数列表。

举个例子，假设代码
function sum(a, b) {
    return a + b + 100;
}

AST结构如下：
FunctionExpression
├── params: [Identifier(name="a"), Identifier(name="b")]
└── body
    ├── ReturnStatement
    │   ├── BinaryExpression
    │   │   ├── left: Identifier(name="a")
    │   │   ├── right: BinaryExpression
    │   │       ├── left: Identifier(name="b")
    │   │       ├── right: NumericLiteral(100)
    
（2）为什么不能用 path.node.params[0].name 直接比较？
let visitor = {};
visitor.FunctionExpression = {
    enter: function (path) {
        let myVisitor = {
            Identifier(path) {
                if (path.node.name === path.node.params[0].name) {  // 错误
                    path.node.name = 'x';
                }
            }
        };
        path.traverse(myVisitor);
    }
};
错误原因：
path.node 在Identifier访问时，代表的是变量，而不是FunctionExpression。
path.node.params 在Identifier节点根本不存在，会导致Cannot read properties of undefined 错误。

正确做法
let visitor = {};
visitor.FunctionExpression = {
    enter: function (path) {
        let paramName = path.node.params[0].name; // 获取函数的第一个参数名
        let myVisitor = {
            Identifier(path) {
                if (path.node.name === this.paramName) { // 通过 this 访问 paramName
                    path.node.name = 'x';
                }
            }
        };
        path.traverse(myVisitor, { paramName }); // 把 paramName 传进去
    }
};
traverse(ast, visitor);

（3）path.traverse(myVisitor, { paramName });是什么语法？
是简化的，其实是path.traverse(myVisitor, { paramName:paramName });

types组件

types判断节点类型

该组件主要用来判断节点类型，生成新的节点等，判断节点类型很简单，例如t.isldentifier(path.node)，它等价于 path.node.type=="Identifier"，还可以在判断类型的同时附加条件，演示案例如下

const t = require("@babel/types");
traverse(ast, {
    enter(path, state) {

        if (path.node.type === 'Identifier' && path.node.name === 'a') {
            path.node.name = 'x';
        }
		// path.node, {name: 'a'}是判断当前节点的name属性是否为a
        if(t.isIdentifier(path.node, {name: 'a'})){
            path.node.name = 'x';
        }
		// 作用和上面的等价
        if(path.isIdentifier({name: 'a'})){
            path.node.name = 'x';
        }
    }
});

types生成新节点

直接上代码，很好理解，也就是对着AST语法树的节点看需要添加什么节点，节点的属性是什么，子节点是什么

let var_a = types.identifier('a');
let vardoc = types.variableDeclarator(var_a, types.numericLiteral(100));
let myCode = types.variableDeclaration('let', [vardoc]);
console.log(generator(myCode).code);

let var_name = types.identifier('name');
let objpro = types.objectProperty(var_a, types.numericLiteral(200));
let objpro2 = types.objectProperty(var_name, types.stringLiteral('John'));

let var_add = types.identifier('add');
let var_b = types.identifier('b');
let binar = types.binaryExpression('+', var_a, var_b);
let binar2 = types.binaryExpression('+', binar, types.numericLiteral(1000));
let funcbody = types.blockStatement([types.returnStatement(binar2)]);
let funcexpr = types.functionExpression(null, [var_a, var_b], funcbody);
let objpro3 = types.objectProperty(var_add, funcexpr);

let objexp = types.objectExpression([objpro, objpro2, objpro3]);
let var_obj = types.identifier('obj');
let vardoc2 = types.variableDeclarator(var_obj, objexp);
let myCode2 = types.variableDeclaration('let', [vardoc2]);
console.log(generator(myCode2).code);

valueToNode方法也可以生成各种字面量，和上面的代码功能一样，但是不能生成FunctionExpression节点

console.log(types.valueToNode([1, "2", false, null, undefined, /\w\s/g, {x: '1000', y: 2000}]));
//返回如下
//{
//  type: 'ArrayExpression',
//  elements: [
//    { type: 'NumericLiteral', value: 1 },     
//    { type: 'StringLiteral', value: '2' },    
//    { type: 'BooleanLiteral', value: false }, 
//    { type: 'NullLiteral' },                  
//    { type: 'Identifier', name: 'undefined' },
//    { type: 'RegExpLiteral', pattern: '\\w\\s', flags: 'g' },
//    { type: 'ObjectExpression', properties: [Array] }
//  ]
//}
console.log(generator(types.valueToNode({
    a: 200,
    name: 'John',
})).code);
// 直接生成字面量，也就是对象
//{
//  a: 200,
//  name: "John"
//}

path对象

先看这段代码

let obj = {
    name:'John',
    add:function(a,b){
        return a+b+1000;
    },
    mul:function(a,b){
        return a*b;
    },
};

直接输出path

const fs = require('fs');
const parser = require("@babel/parser");
const traverse = require("@babel/traverse").default;
const t = require("@babel/types");
const generator = require("@babel/generator").default;

const jscode = fs.readFileSync("./demo.js", {
    encoding: "utf-8"
});
let ast = parser.parse(jscode);

//在这里对AST进行一系列的操作
traverse(ast, {
    Identifier(path) {
        console.log(path);
        path.stop();
    }
});
let code = generator(ast).code;
fs.writeFile('./demoNew.js', code, (err)=>{});

结果可以看到path的属性是NodePath，NodePath下有node属性，从而得知node其实是path的一个属性

parentPath是当前节点的父节点的path对象

container，当container的值是一个数组的时候，代表当前节点是存在兄弟节点的

scope代表作用域

访问子节点属性

path对象提供了一系列api，可以方便的操作节点，还是以上面的demo为例，尝试访问BinaryExpression的子节点，就有两种方法

traverse(ast, {
    BinaryExpression(path){
        console.log(path.node.left);
        console.log('=========================');
        console.log(path.node.right);
        console.log('=========================');
        console.log(path.node.operator);
        console.log('=========================');
        path.stop();
    }
})


traverse(ast, {
    BinaryExpression(path){
        console.log(path.get('left.left.name'));
        console.log('=========================');
        console.log(path.get('right'));
        console.log('=========================');
        console.log(path.get('operator'));
        console.log('=========================');
        path.stop();
    }
})

语法转代码

console.log(generator(path.node).code);
console.log(path.toString());
console.log(path + '');
//console.log(path.node + ''); 这个不行

替换节点属性

比如要替换代码中的a和b为x和y

traverse(ast, {
    BinaryExpression(path) {
        path.node.left = types.identifier('x');
        path.node.right = types.identifier('y');
        path.stop();

        let node = path.node;
        node.left = types.identifier('x');
        node.right = types.identifier('y');
        path.stop();
		
        // 但是下面这种不可以，left和right是局部变量，修改的是局部变量的属性
        let left = path.node.left;
        let right = path.node.right;
        left = types.identifier('x');
        right = types.identifier('y');
        console.log(path.node.left);
        console.log(path.node.right);
        path.stop();
    }
})

替换节点，比如要把上面的函数return改为返回字符串

traverse(ast, {
    BinaryExpression(path){
        path.replaceWith(types.valueToNode('John'));
        // 用replaceWithMultiple和replaceInline可以替换为返回多个字符串
        path.replaceWithMultiple([
            types.valueToNode('John'),
            types.valueToNode('ruyi'),
            types.valueToNode('ast'),
        ]);
        path.replaceInline(types.valueToNode('John'));
        path.replaceInline([
            types.valueToNode('John'),
            types.valueToNode('ruyi'),
            types.valueToNode('ast'),
        ]);

    }
})

替换代码、删除和插入节点

替换return语句为其他语句，使用replaceWithSourceString方法

traverse(ast, {
    ReturnStatement(path) {
        // let argu = path.get('argument');
        // argu.replaceWithSourceString('function(){ return ' + argu + '}()');
        // 这里如果不加path.skip()的话，会出现死循环，因为新增的语句是return，会被遍历到，然后遍历到之后又加return
        // path.skip();
        // path.remove();删除节点
        path.insertBefore([types.stringLiteral("Before"), 
            types.expressionStatement(types.stringLiteral("Before"))]);
        path.insertAfter([types.expressionStatement(types.stringLiteral("After")),
            types.expressionStatement(types.stringLiteral("After"))]);
    }
})

父级path

前面输出的Path对象，可以看到有 parentPath和parent 两个属性。其中parentPath 类型为NodePah ，所以它是父级 Path。parent类型为 Node，所以它是父节点，因而只要获取到父级Path，就可以调用Path对象的各种方法去操作父节点了，父级Path 的获取可以使用 path.parentPath.

常用方法

path.findParent，向上遍历语法树，直到满足相应的条件返回

traverse(ast, {
    ReturnStatement(path) {
        console.log(path.findParent((p) => p.isFunctionExpression()) + '');
        //path.findParent(function(p){return p.isObjectExpression()});这是另一种写法
        //console.log(path.getFunctionParent() + '');
    }
});

Path 对象的 findParent 接收一个回调函数，在向上遍历每一个父级 Path 时，会调用该回调函数，并传入对应的父级Path 对象作为参数。当该回调函数返回真值时，则将对应的父级 Path 返回。上述代码会遍历 ReturnStatement，然后向上找父级 Path，当找到 Path 对象类型为 ObjectExpression的情况时，就返回该Path 对象.

path.getFunctionParent，向上查找与当前节点最接近的父函数 path.getFunctionParent 返回的也是 Path 对象

path.getStatementParent，向上遍历语法树，直到找到语句父节点，Statement语句包含很多，例如，声明语句、return语句、if语句、switch语句、while语句等等，返回的也是Path对象，该方法从当前节点开始找起，如果想要找到return 语句的父语句，就需要从parentPath中去调用，代码如下:

1	console.log(path.parentPath.getStatementParent());

同级path

container

在介绍同级path之前，先介绍一下container

对于这段代码

let obj = {
    name:'John',
    add:function(a,b){
        let x = 200;
        let y = 100;
        return a+b+x+y+1000;
    },
    mul:function(a,b){
        return a*b;
    },
};

运行

traverse(ast, {
   ReturnStatement(path){
      console.log(path);
   }
});

这段解析的代码作用就是在 AST 遍历过程中，每当遇到 ReturnStatement 节点时，打印当前节点的 path

对于这一段函数代码

add:function(a,b){
    let x = 200;
    let y = 100;
    return a+b+x+y+1000;
},

其container如下

container: [
  Node {
    type: 'VariableDeclaration',
    start: 63,
    end: 75,
    loc: [SourceLocation],
    declarations: [Array],
    kind: 'let'
  },
  Node {
    type: 'VariableDeclaration',
    start: 85,
    end: 97,
    loc: [SourceLocation],
    declarations: [Array],
    kind: 'let'
  },
  Node {
    type: 'ReturnStatement',
    start: 107,
    end: 127,
    loc: [SourceLocation],
    argument: [Node]
  }
],
listKey: 'body',
key: 2,

可以得出：

1
2
3

container是一个数组，它存放了一组Node节点（AST 节点）。
每个元素是一个 AST Node，比如 VariableDeclaration（变量声明）和ReturnStatement（返回语句）。
这些 Node 共同组成了一个代码块（BlockStatement { ... }）。

几个问题

（1）key是什么？
key: 2 可以看出：
key 表示当前 ReturnStatement 在 container 数组中的索引位置。
key = 2 说明 ReturnStatement 是 container 里的第三个元素（索引从 0 开始）。
比如这段代码
function add(a, b) {
    let x = 10;
    let y = 20;
    return a + b + x + y;
}
AST结构如下：
FunctionDeclaration
└── BlockStatement (body: [])
    ├── VariableDeclaration (let x = 10;)
    ├── VariableDeclaration (let y = 20;)
    └── ReturnStatement (return a + b + x + y;)

（2）listKey 和 container 的层级关系
简单来说：
container 是 AST 结构中的某个属性值，它是一个数组，存放多个 Node。
listKey 是 指向 container 这个数组的属性名称。
listKey 不是 container 的成员，而是 path 的成员。
path.parent[listKey] 就是 container
比如这段代码
const parser = require("@babel/parser");
const traverse = require("@babel/traverse").default;

const code = `
function add(a, b) {
    let x = 10;
    let y = 20;
    return a + b + x + y;
}`;

const ast = parser.parse(code, { sourceType: "module" });

traverse(ast, {
    ReturnStatement(path) {
        console.log("Node:", path.node);
        console.log("Parent:", path.parent);
        console.log("Container:", path.container);
        console.log("listKey:", path.listKey);
        console.log("Parent[listKey] === Container:", path.parent[path.listKey] === path.container);
    }
});
//输出如下
Node: { type: 'ReturnStatement', argument: { ... } }
Parent: { type: 'BlockStatement', body: [Array] }
Container: [
    { type: 'VariableDeclaration', kind: 'let' },
    { type: 'VariableDeclaration', kind: 'let' },
    { type: 'ReturnStatement' }
]
listKey: body
Parent[listKey] === Container: true
//说明了什么
这说明：
path.parent 是 BlockStatement（即 { let x = 10; let y = 20; return ... }）。
path.parent.body 是 一个数组，存放了 VariableDeclaration 和 ReturnStatement 这些节点。
container 就是 path.parent.body，也就是 BlockStatement 里的所有语句。
listKey 是 "body"，它告诉我们 container 其实是 path.parent 的 body 属性。

（3）listKey 是怎么来的
当 Babel 解析代码并创建 AST 时，每个 Node 都有自己的 结构。
某些 Node 类型（如 BlockStatement）会有 数组属性 来存储多个子节点，比如 body。
当 traverse 遍历 AST 并到达 ReturnStatement 这种节点时，它会：
	获取 ReturnStatement 的父节点（parent）。
	检查 parent 里有哪些属性存放了多个 Node（即数组）。
	找到 ReturnStatement 在 parent 的哪个数组属性里，并把这个属性名存入 listKey。
所以，listKey 的值是 ReturnStatement 在 parent 里的属性名。
代码：
function add(a, b) {
    let x = 10;
    let y = 20;
    return a + b + x + y;
}
如下AST：
FunctionDeclaration
└── BlockStatement  (body: [])
    ├── VariableDeclaration  (let x = 10;)
    ├── VariableDeclaration  (let y = 20;)
    └── ReturnStatement  (return a + b + x + y;)
解析代码：
traverse(ast, {
    ReturnStatement(path) {
        console.log("Node:", path.node);       // 当前节点
        console.log("Parent:", path.parent);   // 父级 BlockStatement
        console.log("Container:", path.container); // 存放 return 语句的数组
        console.log("listKey:", path.listKey); // "body"，表示 container 属于 parent.body
    }
});
打印结果
Node: { type: 'ReturnStatement', argument: { ... } }
Parent: { type: 'BlockStatement', body: [Array] }
Container: [
    { type: 'VariableDeclaration', kind: 'let' },
    { type: 'VariableDeclaration', kind: 'let' },
    { type: 'ReturnStatement' }
]
listKey: "body"
可以发现Parent的body的内容就是container的内容，这里是输出的时候被console.log省略了

（4）listKey怎么来的
接上面
listKey 的工作原理
Babel 在 path 创建时，会自动查找 node 在 parent 里的位置：
1.找到 path.node 的父节点：
	path.node 是 ReturnStatement。
	path.parent 是 BlockStatement（函数体 {}）。
2.找出 path.node 在 path.parent 里的属性：
	BlockStatement 有一个 body 属性，它是一个 数组，存放所有代码块里的语句。
	body 里有 { let x = 10; }、{ let y = 20; } 和 { return a + b + x + y; }。
	ReturnStatement 是 body 数组的第三个元素。
3.存入 listKey：
	Babel 发现 ReturnStatement 在 BlockStatement.body 这个数组里。
	listKey = "body"，表示 ReturnStatement 来自 parent.body 这个数组。

所以container存储的是当前节点的同级节点

当然container不一定都是数组，也有不是数组的情况，对于这种情况，可以理解为当前节点没有兄弟节点

同级节点有关方法

traverse(ast, {
    ReturnStatement(path){ 
        console.log( path.inList );    //true
        console.log( path.container ); // [node {type: 'ReturnStatement' ... }]
        console.log( path.listKey );   // body
        console.log( path.key );      // 0
        console.log( path.getSibling(path.key + 1).node );
        console.log("====================================");
        console.log('getAllNextSiblings', path.getAllNextSiblings());
        console.log('getAllPrevSiblings', path.getAllPrevSiblings());
        console.log('getNextSibling', path.getNextSibling());
        console.log('getPrevSibling', path.getPrevSibling());
      // node {type: 'ReturnStatement' ... }
        path.stop();
  }
});

path.inList 判断是否有同级节点
path.container 获取容器，包括所有同级节点的数组
path.listKey 获取容器名
path.key 获取当前节点在container中的索引
path.getSibling 用于获取同级 Path，其中参数index 即容器数组中的索引，index 可以通过 path.key 来获取，可以对 path.key 进行加减操作，来定位到不同的同级Path.
getAllNextSiblings 获取所有后面的节点
getAllPrevSiblings 获取所有前面的节点

在container中插入节点，unshiftContainer是在容器头部插入节点，pushContainer是在容器后面插入节点

traverse(ast, {
    ReturnStatement(path) {
        path.parentPath.unshiftContainer('body', [
			types.expressionStatement(types.stringLiteral('Before1')),
            types.expressionStatement(types.stringLiteral('Before2'))]);
        console.log(path.parentPath.pushContainer('body', 
        types.expressionStatement(types.stringLiteral('After'))));
    }
});

scope对象

介绍

scope 提供了一些属性和方法，可以方便的查找标识符的作用域，获取标识符的所有引用，修改标识符的所有引用，以及知道标识符是否参数，标识符是否为常量，如果不是常量也可以知道在哪里修改了它，以下面的代码为例:

const a = 1000;
let b = 2000;
let obj = {
    name: 'John',
    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);

ast.js

// 获取e变量的作用域范围，打印出作用域内的代码
traverse(ast, {
    Identifier(path) {
        if (path.node.name == 'e') {
            console.log(generator(path.scope.block).code);
        }
    }
});

// 获取函数的作用域范围，打印代码
// 对于函数得从path.parentPath获取作用域
traverse(ast, {
    FunctionDeclaration(path) {
        console.log(generator(path.parentPath.scope.block).code);
    }
});

// 获取标识符的绑定
traverse(ast, {
    FunctionDeclaration(path) {
        // 获取变量的绑定
        let binding1 = path.scope.getBinding('a');
        //console.log(binding);
        console.log(generator(binding1.scope.block).code);
        // 获取函数的绑定
        let binding2 = path.scope.getBinding('demo');
        console.log(generator(binding2.scope.block).code);
    }
});

// 该函数用于获取当前节点自己的绑定,也就是不包含父级作用域中定义的标识符的绑定
// 但是该函数会得到子函数中定义的标识符的绑定
// 简而言之就是判断标识符是否是在自己的作用域范围内定义的，比如函数内用到的b是全局变量b，那么b就不是自己的绑定
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);
	}
});

// 判断标识符的作用域是否为当前作用域
// 比如function a内定义一个function b，b内定义了一个变量d，如果用上面的代码取获取a内的标识符，d也会被输出
// 下面的方法就是筛掉子函数内定义的标识符的
// 通过path + ''将path转换为js代码和scope转换的js代码比较，一致的话就是当前函数内定义的标识符
function TestOwnBinding(path){
	path.traverse({
		Identifier(p){
			let name = p.node.name;
			let binding = p.scope.getOwnBinding(name);
            //console.log(name, binding);
			binding && console.log( name, generator(binding.scope.block).code == path + '' );
		}
	});
}
traverse(ast, {
	FunctionExpression(path){
		TestOwnBinding(path);
	}
});

traverse(ast, {
    FunctionDeclaration(path) {
        let binding = path.scope.getBinding('a');
        //path.traverse
        binding.scope.traverse(binding.scope.block, {
            AssignmentExpression(p) {
                if (p.node.left.name == 'a')
                    p.node.right = types.numericLiteral(500);
            }
        });
    }
});

traverse(ast, {
    FunctionExpression(path) {
        let binding = path.scope.getBinding('b');
        binding.scope.rename('b', path.scope.generateUidIdentifier("_0x2ba6ea").name);

        // let uid1 = path.scope.generateUidIdentifier("uid");
        // console.log(uid1);
        // let uid2 = path.scope.generateUidIdentifier("uid");
        // console.log(uid2);

    }
});


traverse(ast, {
    Identifier(path){
        path.scope.rename(path.node.name, path.scope.generateUidIdentifier('_0x2ba6ea').name);
    }
});

几个问题

（1）什么是绑定
在 Babel AST 解析中，"绑定"（Binding） 指的是 变量（或函数）在作用域中的定义及其相关信息。
path.scope.getBinding(name)用于查找 当前作用域及其父作用域 中变量 name 的绑定信息。
它返回一个 Binding 对象，其中包含该变量的 定义位置、引用位置、常量性 等信息。

（2）Binding 绑定信息包含哪些内容？
Babel 返回的 Binding 对象通常包含：
    identifier：变量的定义标识符（即 let x = 10; 里的 x）。
    scope：该变量的作用域对象（Scope）。
    path：指向变量声明的 NodePath。
    constant：是否是常量（true/false）。
    references：被引用的次数。
    referencePaths：所有引用的 NodePath 数组。

referencePaths与constantViolations

在 Babel 的 AST 处理过程中，referencePaths 和 constantViolations 是 Binding 对象的属性，主要用于追踪变量的引用情况和是否被修改。它们是在 Babel 的作用域分析（Scope Analysis）阶段被定义的。

referencePaths，存储当前绑定（binding）的所有引用位置。定义在 Binding 对象中，包含所有引用了该变量的 Identifier 节点（但不包括声明）和不会包含对该变量的赋值位置（赋值的位置属于 constantViolations）

比如

function test() {
  let x = 10;
  console.log(x);
  return x + 5;
}

x 的 binding 可能类似于

{
  "identifier": { "name": "x" },
  "path": { "type": "VariableDeclarator" },
  "referencePaths": [
    { "type": "Identifier", "name": "x" },  // console.log(x);
    { "type": "Identifier", "name": "x" }   // return x + 5;
  ],
  "constantViolations": []
}

referencePaths 包含 console.log(x) 和 return x + 5 的 Identifier 节点，但不包括 let x = 10;，因为 let 语句是变量的定义，不是引用。

constantViolations，存储所有可能修改变量值的位置。定义同样在 Binding 对象中，包含变量的重新赋值位置（如 x = 20;）、通过 ++, --, += 等操作修改变量的地方、如果是 const 声明，理论上 constantViolations 应该为空

比如

function test() {
  let x = 10;
  x = 20;
  x += 5;
  console.log(x);
}

x 的 binding 可能类似于

{
  "identifier": { "name": "x" },
  "path": { "type": "VariableDeclarator" },
  "referencePaths": [
    { "type": "Identifier", "name": "x" }  // console.log(x);
  ],
  "constantViolations": [
    { "type": "AssignmentExpression", "operator": "=", "right": 20 }, // x = 20;
    { "type": "AssignmentExpression", "operator": "+=", "right": 5 }  // x += 5;
  ]
}

什么时候使用 referencePaths 和 constantViolations？

1 2	如果你想找到变量在代码中的所有引用（如 console.log(x)），用referencePaths。如果你想找出变量在哪里被修改了（如 x = 20;），用 constantViolations。

查看绑定的referencePaths？

traverse(ast, {
    FunctionExpression(path) {
        let binding = path.scope.getBinding('a');
        console.log(binding.referencePaths);
    }
})

输出大概长这样

[
  NodePath {
    parentPath: NodePath {
      parentPath: [NodePath],
      container: [Node],
      listKey: undefined,
      key: 'left',
      node: [Node],
      type: 'BinaryExpression',
      parent: [Node],
    },
    container: Node {
      type: 'BinaryExpression',
      left: [Node],
      operator: '+',
      right: [Node]
    },
    listKey: undefined,
    key: 'left',
    node: Node {
      type: 'Identifier',
      name: 'a'
    },
    type: 'Identifier',
    parent: Node {
      type: 'BinaryExpression',
      left: [Node],
      operator: '+',
      right: [Node]
    },
    hub: undefined,
    data: null,
    scope: Scope {
      path: [NodePath],
      block: [Node],
      inited: true,
      labels: Map(0) {},
      bindings: [Object: null prototype],
      references: [Object: null prototype] {},
    }
  },
  NodePath {
    parentPath: NodePath {
      parentPath: [NodePath],
      container: [Node],
      listKey: undefined,
      key: 'left',
      node: [Node],
      type: 'BinaryExpression',
      parent: [Node],
    },
    container: Node {
      type: 'BinaryExpression',
      left: [Node],
      operator: '+',
      right: [Node]
    },
    listKey: undefined,
    key: 'right',
    node: Node {
      type: 'Identifier',
      name: 'a'
    },
    type: 'Identifier',
    parent: Node {
      type: 'BinaryExpression',
      left: [Node],
      operator: '+',
      right: [Node]
    },
    hub: undefined,
    data: null,
    context: TraversalContext {
      parentPath: [NodePath],
      scope: [Scope],
    },
    scope: Scope {
      path: [NodePath],
      block: [Node],
      inited: true,
      bindings: [Object: null prototype],
      references: [Object: null prototype] {},
      globals: [Object: null prototype] {},
    }
  }
]

先说明几个问题

（1）为什么输出有两个Node？
因为a被引用的地方有两个
这个 return 语句可以拆解为：
return (a + a) + b + 1000 + obj.name;
a + a 是 一个 BinaryExpression，其中 a 作为 BinaryExpression 的子节点

结构大致是这样的
{
  "type": "BinaryExpression",
  "operator": "+",
  "left": {
    "type": "Identifier",
    "name": "a"
  },
  "right": {
    "type": "Identifier",
    "name": "a"
  }
}

a 在 left 和 right 里被引用。
BinaryExpression 是 a 的 parentPath
所以 binding.referencePaths 里的 a：
	它的 parentPath 是 BinaryExpression（因为 a 是 a + a 这个表达式的一部分）。
	BinaryExpression 的 parentPath 才是 return 语句。

（2）binding.path和referencePaths和parentPath
binding.path是变量的定义 即 a 在 function (a) {...} 的参数
referencePaths是变量的所有引用 即 a 在 a + a + b + 1000 里
parentPath是引用的a的地方的父path，在这里的话，a 在 a + a 里面，所以 parentPath 是 BinaryExpression

（3）引用（reference）和定义（binding）
结论：引用（reference）一定是 Identifier，但 Identifier 不一定是引用。
引用（reference）指的就是AST里Identifier节点的位置，比如a在return a + a + b + 1000; 里的每个 a，它们都属于referencePaths 里的节点。
但定义（binding）不一定是Identifier节点，它的具体类型取决于a是在哪种语法结构中被定义的。
用如下代码可以查看变量定义的位置
let binding = path.scope.getBinding('a');
console.log(binding.path.node);
这个binding.path.node就是a定义的节点类型，它的类型不一定是Identifier。
如下：
定义方式	| binding.path.node的类型 |  示例代码
变量声明	| VariableDeclarator	 |  let a = 100;
函数参数	| Identifier	         |  function fn(a) {}
函数声明	| FunctionDeclaration	 |  function a() {}
类声明	     | ClassDeclaration	      |  class a {}
导入语句	| ImportSpecifier	     |  import { a } from 'mod';

（4）为什么第一个NodePath长这样
NodePath {
    parentPath: NodePath {  
        parentPath: [NodePath],  
        container: [Node],  
        listKey: undefined,  
        key: 'left',  
        node: [Node],  
        type: 'BinaryExpression',  
        parent: [Node]  
    },  
    container: Node {  
        type: 'BinaryExpression',  
        left: [Node],  
        operator: '+',  
        right: [Node]  
    },  
    listKey: undefined,  
    key: 'left'
}
这里的container和key的值是left怎么理解
先解决container为什么是BinaryExpression
return语句是 return a + a + b + 1000 + obj.name;
它的AST结构如下：
ReturnStatement
└── BinaryExpression (a + a + b + 1000 + obj.name)
    ├── BinaryExpression (a + a)
    │   ├── Identifier (a)  <-- left
    │   ├── "+"  
    │   ├── Identifier (a)  <-- right
    ├── "+"  
    ├── Identifier (b)
    ├── "+"  
    ├── NumericLiteral (1000)
    ├── "+"  
    ├── MemberExpression (obj.name)
只看a的NodePath
BinaryExpression (a + a)
├── left: Identifier (a)
├── operator: "+"
├── right: Identifier (a)
这里 a 在 BinaryExpression 的 left 和 right 中
当 Babel 遍历 a 的 NodePath 时：
	a的 container 是它所在的父节点，也就是BinaryExpression

其次，parentPath.key = "left" 是什么意思
在上面的AST结构中
BinaryExpression (a + a)
├── left: Identifier (a)  <-- 输出的 `parentPath.key === "left"`
├── operator: "+"
├── right: Identifier (a)
第一个a在BinaryExpression里的left位置：BinaryExpression.left = Identifier(a);

总结：
container 代表当前节点所在的父级表达式
parentPath.key 指的是当前Node在parentPath.node里的属性名

constantViolations也同理了，所以可以根据标识符的binding去修改代码

traverse(ast, {
    FunctionExpression(path) {
        let binding = path.scope.getBinding('a');
        console.log(binding.referencePaths);
        console.log(binding.constantViolations[0].node);
        binding.constantViolations[0].node.right = types.valueToNode(500);
        binding.referencePaths[0].replaceWithSourceString('y + h');
        path.stop();
    }
})

遍历作用域

前面说过，使用path.scope.block可以获取作用域，但是针对函数的话，需要path.scope.parent.block获取作用域，而binding.scope可以直接获取，不需要考虑是变量还是函数

traverse(ast, {
    FunctionDeclaration(path) {
        let binding = path.scope.getBinding('a');
        //path.traverse
        //在标识符a的作用域内遍历，其实就是遍历函数内部
        binding.scope.traverse(binding.scope.block, {
            AssignmentExpression(p) {
                if (p.node.left.name == 'a')
                    p.node.right = types.numericLiteral(500);
            }
        });
    }
});

标识符重命名

scope.generateUidIdentifier可以返回不容易重名的变量名

traverse(ast, {
    FunctionExpression(path) {
        let binding = path.scope.getBinding('b');
        binding.scope.rename('b', path.scope.generateUidIdentifier("_0x2ba6ea").name);

        // let uid1 = path.scope.generateUidIdentifier("uid");
        // console.log(uid1);
        // let uid2 = path.scope.generateUidIdentifier("uid");
        // console.log(uid2);

    }
});