前言

UglifyJS会对JS文件的变量名进行混淆处理。要理解Javascript变量混淆的细节。我们须要回答下面几个问题：

1.遇到一个变量myName，我们怎么知道这个myName变量要不要混淆

2.混淆名字怎么生成才合适。新的名字替换旧的名字时有什么要注意的地方？

3.哪些keyword会产生一个作用域？

4.作用域链跟符号表在UglifyJS里边是怎么体现？

5.UglifyJS混淆的过程是什么样？

我们先梳理一下这5个问题，最后贴出我阅读UglifyJS在这部分的实现时做的代码凝视。

1.遇到一个变量myName，我们怎么知道这个myName变量要不要混淆

Javascript里边涉及到名字分为三种：变量名、函数名、标签名。下文统称为名字。

为了混淆某个名字。我们必须知道这个名字在当前作用域以及作用域链上的声明情况以及使用情况。

我们先从变量的名字混淆開始讨论。

举个简单的样例。JS文件内容是：var myName = {}; myName.prop = val;

这里myName这个名字能够被混淆成别的名字，可是val这个变量就不能被混淆，由于它是全局变量，有可能在别的文件中边声明定义了。

同一时候我们知道假设在当前文件定义了一个全局变量，有可能会被还有一个文件所引用，因此这个全局变量的名字也不能被混淆。

当然这里适用于函数名跟标签名。

规则1.1：仅仅有在作用域链上边的声明过的名字才干够混淆。当前文件声明的全局变量的名字不能混淆

对于一个函数声明：function func(argA, argB, argC){}

Javascript这里进入func之后事实上就进入了func的作用域。我们知道argA/argB/argC事实上就是在这个func作用域上声明的变量，

规则1.2：函数声明时的參数名能够混淆。

还能够发现一个特殊的地方，就是：try{ } catch(e) { }

规则1.3：catch后边參数列表的名字能够混淆。

举个样例：

  1. function A(){
  2.      var myName = "A";
  3.      function B(){
  4.           myName = "B";
  5.           with(obj){
  6.                myName = "with";
  7.           }
  8.      }
  9. }

因为with会改变当前的作用域链，我们知道在with里边，假设obj具有myName这个属性的话，那myName = "with"事实上就等价于obj.myName = "with";

假设是这样的情况混淆了myName这个名字，执行时可能就不再对obj的myName属性进行赋值了。同理假设myName混淆成名字e的话，刚刚好obj有个属性名字叫做e，也可能会引起执行时错误。

规则1.4：在使用了with的作用域链上的全部变量名都不能混淆。

  1. function A(){
  2.      var myName = "A";
  3.      function B(){
  4.           myName = "B";
  5.           eval("myName = 1;");
  6.      }
  7. }

由于eval是在执行时才知道执行的字符串的内容。因此在静态分析的时候并不能知道eval后边的字符串引用了什么变量，假设在当前作用域链上混淆了某些变量。可能引起eval的时候会有执行时找不到变量的错误。当然再复杂的情况就是eval里边又使用eval跟with嵌套

规则1.5：在使用了eval的作用域链上的全部变量名都不能混淆。

2.混淆名字怎么生成才合适，新的名字替换旧的名字时有什么要注意的地方？

假设我明白了一个变量myName须要被混淆，那最后它应该变成什么样的名字呢？首先肯定是越短越好，这样能够更有效的降低JS文件体积，下载JS速度也对应会提高。

因此简单的方案就是我从 [a-z][A-Z]$_ 这54个字母中取一个作为作为变量名就可以，假设当前作用域声明的变量超过了54个，那就须要从[a-z][A-Z]$_[0-9]这64个字母中再去取第二个字母，假设还不够就接着取第三个字母。

看完UglifyJS源代码，认为最牛逼的一点是，居然为了考虑到gzip后的JS文件更小，其使用的混淆名字的顺序是："etnrisouaflchpdvmgybwESxTNCkLAOM_DPHBjFIqRUzWXV$JKQGYZ0516372984"

UglifyJS的实现是，当前作用域得到的第1个混淆名为e，第2个混淆名是t……第54个是Z，第55个是et，第56个是tt……

讨论完怎么生成名字的规则后须要讨论混淆的规则了。混淆必须依据当前作用域的一些信息才干得以进行，首先这个规则最简单：

规则2.1：当前作用域不同变量混淆后的变量名不能反复。同一时候混淆后的名字不能是keyword。

其次要考虑下面几种在作用域链上的特殊情况：

场景1. 作用域B里边引用了作用域A作用域声明的变量name，因此作用域B里边就不能再使用name混淆后的变量名字e，否则会出现下图右側那样的问题：



这个情况仅仅要作用域B是在作用域A的嵌套底下才会出现。因此：

规则2.2：作用域B的祖宗作用域是作用域A。作用域B假设引用作用域A的变量name，而name变量被混淆后的名字为e，则作用域B里边不得再使用e来作为其下全部变量的混淆名字。

场景2.作用域A可能用到了一个全局变量e，因此我们不能将它混淆为其它名字，接着作用域B里边有e的引用，这个时候作用域B里边就不能再使用name混淆后的变量名字e。否则会出现下图右側那样，e.b实际是引用了作用域B的e变量

这个情况仅仅要作用域B是在作用域A的嵌套底下才会出现。因此：

规则2.3：作用域B的祖宗作用域是作用域A，作用域B假设引用作用域A不參与混淆的变量e，则作用域B里边不得再使用e来作为其下全部变量的混淆名字。

场景3.作用域A可能一个全局变量name，可是我们在作用域A的祖宗作用域中都找不到name的声明，这时候就不能把name给混淆掉，否则会出现右图那样，实际上没有e这个全局变量

规则2.4：不能混淆全局变量。

3.哪些keyword会产生一个作用域？

在UglifyJS里边採用with_new_scope这个函数来为AST树枝生成作用域信息。

能够从其源代码中看到两个地方会产生作用域信息。

规则3.1：整个JS文件处于一个全局作用域，UglifyJS称为toplevel。

规则3.2：functionkeyword声明的函数内部处于一个作用域。

规则3.3：作用域A能够嵌套作用域B。这里可称之为作用域链，为了叙述方便，我把作用域B为作用域A的后代，变量的声明是沿着作用域链从低向上找到相应的定义。

或许会比較奇怪两个问题：

1.with块里边不算作用域？

事实上从Javascript的角度上来说。with是会改变当前作用域的。

在with(obj){ /**/ }的块里边。事实上是位于一个新的作用域上，作用域的符号表就是obj这个对象。

可是为什么UglifyJS不把with觉得是一个作用域？原因是with是在执行时改变了当前作用域链，UglifyJS在静态分析源码的时候根本没法得知执行时的信息，因此没法把它当做作用域来看待，由于静态分析没法知道在with块里边怎么混淆变量名字，因此才有了规则1.4。

2.catch块不算作用域？

先看一个简单的Demo



事实上这个样例不能说明问题。你应该始终把catch块觉得是一个with块。

在进入catch块的时候。Javascript确实会生成一个作用域。这个作用域跟with的參数一样，是一个对象。或许你会奇怪这个对象有什么属性？答案就是：catch后边带的參数名是什么。这个对象就有那个属性。

上边的Demo中，进入catch的时候，实际上就是把一个对象Obj = {e:{}}放到了当前作用域链上。

然后在解析myName的时候，发现Obj没有，就回到了父亲作用域上找myName的声明，假设找不到，就在父亲作用域上边声明myName这个变量。

解析e变量的时候。发现e在当前的Obj属性有，所以在catch里边可以找到e的声明。

可是同withkeyword一样。UglifyJS没法静态分析得到这个信息，因此它不会为catch这个AST树枝生成作用域信息。

可是！catch跟with不同的地方就是。catch在静态分析的时候是能够知道在catch块作用域里边声明的变量了，没错，就是catch后边带的參数名字e，因此UglifyJS是会对这个变量进行混淆处理的。

4.作用域链跟符号表在UglifyJS里边是怎么体现？

UglifyJS的实现里边是使用Scope作为作用域类，这边罗列一下其属性。具体的实现见文章末尾的代码凝视：

  1. names = {} 表示在当前作用域下声明的变量函数的名字，也即是我们经常说的符号表！
  2. mangled = {} 混淆前变量以及混淆后变量的映射表，变量myName混淆后得到变量e，那么mangled["myName"] == "e"。
  3. rev_mangled = {} 跟mangled反过来，为了能够反查出混淆前变量的名字是什么。

  4. cname =
  5. refs = {} 记录着当前作用域内引用的信息，ref["a"] = <Scope B>

  6. 表示当前作用域使用了作用域链上B作用域所声明的a变量。

  7. uses_with = true/false 表示当前作用域有没有使用了with块，假设有的话，这条作用域链上的变量都不能混淆。

  8. uses_eval = true/false 表示当前作用域有没有使用eval函数。假设有的话。这条作用域链上的变量都不能混淆。
  9. parent = <Scope> 父亲作用域是谁。

  10. children = [<Scope>] 孩子作用域列表。
  11. level = <int> 作用域嵌套深度。全局作用域为0。

5.UglifyJS混淆的过程是什么样？

在语法分析之后得到AST树，UglifyJS就会開始遍历AST树，然后为某些节点生成作用域信息。

接着又一次遍历AST树，再混淆里边的变量名。例如以下图：



UglifyJS的实现中是採用一个叫做ast_walker来遍历AST树，调用者能够传递不同的树枝遍历器给它，以实现不同的遍历效果。这个实现很巧妙，能够从上图中看到，四个对AST树的操作事实上底层都是须要遍历AST树的，并且每次对树的处理不一样，比如ast_add_scope要为树枝绑定作用域信息，ast_mangle要把叶子节点名字混淆掉，ast_squeeze要优化树枝大小，最后的gen_code要把树枝输出成字符串。

ast_walker对象是通过with_walkers这个API来重写遍历器：



遍历AST树的时候，能够重定义遍历器，对树枝进行处理：

代码凝视

AST树遍历

  1. //遍历AST树
  2. //AST = ["toplevel", ["name", [xxx]]]
  3. //一般数组的第一个是当前语法规则
  4. //后边几个为语法规则相应的值
  5. //比如函数的AST树枝就是这样表示：["function", "func_name", arguments, body]，当中arguments为数组。body是还有一个AST子树
  6. function ast_walker() {
  7.     function _vardefs(defs) {
  8.         return [ this[0], MAP(defs, function(def){
  9.             var a = [ def[0] ];
  10.             if (def.length > 1)
  11.                 a[1] = walk(def[1]);
  12.             return a;
  13.         }) ];
  14.     };
  15.     function _block(statements) {//语句块
  16.         var out = [ this[0] ];
  17.         if (statements != null)
  18.             out.push(MAP(statements, walk));//遍历全部语句
  19.         return out;
  20.     };
  21.  
  22.     //默认的树枝遍历器
  23.     //从这里就能够看出了整个AST树枝的组成结构了
  24.  
  25.      //叶子节点（比如数值就是所谓的叶子节点）遍历器都是默认不处理 返回原有的树枝结构
  26.      //假设节点不是叶子，，那么这个树枝的子树还须要递归遍历，比如：toplevel, function
  27.      //下边再针对某些特殊的地方做凝视
  28.     var walkers = {
  29.         "string": function(str) {
  30.             return [ this[0], str ];
  31.         },
  32.         "num": function(num) {
  33.             return [ this[0], num ];
  34.         },
  35.         "name": function(name) {
  36.             return [ this[0], name ];
  37.         },
  38.         "toplevel": function(statements) {
  39.             return [ this[0], MAP(statements, walk) ];
  40.         },
  41.         "block": _block,
  42.         "splice": _block,//貌似没有这个状态？
  43.         "var": _vardefs,
  44.         "const": _vardefs,
  45.         "try": function(t, c, f) {
  46.             return [
  47.                 this[0],
  48.                 MAP(t, walk),
  49.                 c != null ?
  50.  
  51. [ c[0], MAP(c[1], walk) ] : null,
  52.                 f != null ?
  53.  
  54. MAP(f, walk) : null
  55.             ];
  56.         },
  57.         "throw": function(expr) {
  58.             return [ this[0], walk(expr) ];
  59.         },
  60.         "new": function(ctor, args) {
  61.             return [ this[0], walk(ctor), MAP(args, walk) ];
  62.         },
  63.         "switch": function(expr, body) {
  64.             return [ this[0], walk(expr), MAP(body, function(branch){
  65.                 return [ branch[0] ? walk(branch[0]) : null,
  66.                          MAP(branch[1], walk) ];
  67.             }) ];
  68.         },
  69.         "break": function(label) {
  70.             return [ this[0], label ];
  71.         },
  72.         "continue": function(label) {
  73.             return [ this[0], label ];
  74.         },
  75.         "conditional": function(cond, t, e) {
  76.             return [ this[0], walk(cond), walk(t), walk(e) ];
  77.         },
  78.         "assign": function(op, lvalue, rvalue) {
  79.             return [ this[0], op, walk(lvalue), walk(rvalue) ];
  80.         },
  81.         "dot": function(expr) {
  82.           //expr.b 的AST是这样=> ["dot", expr, "b"];
  83.             return [ this[0], walk(expr) ].concat(slice(arguments, 1));
  84.         },
  85.         "call": function(expr, args) {
  86.             return [ this[0], walk(expr), MAP(args, walk) ];
  87.         },
  88.         "function": function(name, args, body) {
  89.             return [ this[0], name, args.slice(), MAP(body, walk) ];
  90.         },
  91.         "debugger": function() {
  92.             return [ this[0] ];
  93.         },
  94.         "defun": function(name, args, body) {
  95.             return [ this[0], name, args.slice(), MAP(body, walk) ];
  96.         },
  97.         "if": function(conditional, t, e) {
  98.             return [ this[0], walk(conditional), walk(t), walk(e) ];
  99.         },
  100.         "for": function(init, cond, step, block) {
  101.             return [ this[0], walk(init), walk(cond), walk(step), walk(block) ];
  102.         },
  103.         "for-in": function(vvar, key, hash, block) {
  104.           //for (var init in obj)
  105.           //AST为：["for-in", init, lhs, obj, statement]
  106.             return [ this[0], walk(vvar), walk(key), walk(hash), walk(block) ];
  107.         },
  108.         "while": function(cond, block) {
  109.             return [ this[0], walk(cond), walk(block) ];
  110.         },
  111.         "do": function(cond, block) {
  112.             return [ this[0], walk(cond), walk(block) ];
  113.         },
  114.         "return": function(expr) {
  115.             return [ this[0], walk(expr) ];
  116.         },
  117.         "binary": function(op, left, right) {
  118.             return [ this[0], op, walk(left), walk(right) ];
  119.         },
  120.         "unary-prefix": function(op, expr) {
  121.             return [ this[0], op, walk(expr) ];
  122.         },
  123.         "unary-postfix": function(op, expr) {
  124.             return [ this[0], op, walk(expr) ];
  125.         },
  126.         "sub": function(expr, subscript) {
  127.           //expr[subscript] 的AST是这样=> ["dot", expr, subscript];
  128.             return [ this[0], walk(expr), walk(subscript) ];
  129.         },
  130.         "object": function(props) {
  131.             return [ this[0], MAP(props, function(p){
  132.                 return p.length == 2
  133.                     ?
  134.  
  135. [ p[0], walk(p[1]) ]
  136.                     //p[2] == get | set
  137.                     //p[1] 是get|set的函数体
  138.                     //p[0] 为get|set函数名
  139.                     : [ p[0], walk(p[1]), p[2] ]; // get/set-ter
  140.             }) ];
  141.         },
  142.         "regexp": function(rx, mods) {
  143.             return [ this[0], rx, mods ];
  144.         },
  145.         "array": function(elements) {
  146.             return [ this[0], MAP(elements, walk) ];
  147.         },
  148.         "stat": function(stat) {
  149.             return [ this[0], walk(stat) ];
  150.         },
  151.         "seq": function() {
  152.           //逗号表达式
  153.             return [ this[0] ].concat(MAP(slice(arguments), walk));
  154.         },
  155.         "label": function(name, block) {//这里的block应该statement才对！
  156.             return [ this[0], name, walk(block) ];
  157.         },
  158.         "with": function(expr, block) {
  159.             return [ this[0], walk(expr), walk(block) ];
  160.         },
  161.         "atom": function(name) {
  162.             return [ this[0], name ];
  163.         },
  164.         "directive": function(dir) {
  165.             return [ this[0], dir ];
  166.         }
  167.     };
  168.  
  169.     var user = {};//自己定义树枝遍历器
  170.     var stack = [];//AST遍历时的堆栈信息
  171.  
  172.     //遍历AST
  173.     function walk(ast) {
  174.         if (ast == null)
  175.             return null;
  176.         try {
  177.           //当前AST树压栈
  178.             stack.push(ast);
  179.  
  180.             //["function", "func_name", arguments, body]
  181.             //AST树的第一个元素是这个树的类型
  182.             var type = ast[0];
  183.  
  184.             //取出遍历钩子，这个钩子能够是外界传递进来 也能够是内部默认
  185.             //详细由with_walkers第一个參数来生成
  186.             var gen = user[type];
  187.             if (gen) {//假设有自己定义的树枝遍历器，则用这个遍历器来遍历该树枝，得到结果
  188.                 var ret = gen.apply(ast, ast.slice(1));
  189.                 if (ret != null)
  190.                     return ret;
  191.             }
  192.             //否则调用默认的树枝遍历器
  193.             gen = walkers[type];
  194.             return gen.apply(ast, ast.slice(1));
  195.         } finally {
  196.           //最后恢复堆栈信息
  197.             stack.pop();
  198.         }
  199.     };
  200.  
  201.     //跟walk一样是遍历AST的功能。可是是採用默认的树枝遍历器来遍历
  202.     function dive(ast) {
  203.         if (ast == null)
  204.             return null;
  205.         try {
  206.             stack.push(ast);
  207.             return walkers[ast[0]].apply(ast, ast.slice(1));
  208.         } finally {
  209.             stack.pop();
  210.         }
  211.     };
  212.  
  213.     //外边能够传入自己定义的遍历器
  214.     //@param walkers 外界定义的遍历器
  215.     //@param cont @unknowed
  216.     function with_walkers(walkers, cont){
  217.      //walkers = {"function":function(){}}
  218.         var save = {}, i;
  219.         //i是语法规则名
  220.         for (i in walkers) if (HOP(walkers, i)) {
  221.             save[i] = user[i];//保存原来的遍历器
  222.             user[i] = walkers[i];//用新的遍历器覆盖之
  223.         }
  224.         var ret = cont();//运行钩子 一般这里外边会调用:walk(ast)来遍历AST树
  225.  
  226.         //恢复原来的状态
  227.         for (i in save) if (HOP(save, i)) {
  228.             if (!save[i]) delete user[i];
  229.             else user[i] = save[i];
  230.         }
  231.  
  232.         //得到遍历后生成的新的AST树
  233.         return ret;
  234.     };
  235.  
  236.     return {
  237.         walk: walk,
  238.         dive: dive,
  239.         with_walkers: with_walkers,
  240.         parent: function() {
  241.           //假设是当前这种AST树
  242.           //["toplevel", ["stat", ["function", "A", [], []]]]
  243.           //遍历到树枝function的时候
  244.           //stack是这种
  245.           /*
  246.                ["toplevel", ["stat", ["function", "A", [], []]]]
  247.                ["stat", ["function", "A", [], []]]
  248.                ["function", "A", [], []]
  249.           */
  250.           //function的父亲事实上就是堆栈stack的倒数第二个节点
  251.             return stack[stack.length - 2]; // last one is current node
  252.         },
  253.         stack: function() {
  254.             return stack;
  255.         }
  256.     };
  257. };

作用域信息

  1. /*
  2.      这份代码设计了作用域链的属性以及方法
  3.      同一时候另一个遍历AST树给节点加作用域信息的with_new_scope方法
  4.  */
  5. //作用域信息类
  6. function Scope(parent) {
  7.  
  8.      //当前作用域的符号表，包含变量跟函数变量
  9.     this.names = {};        // names defined in this scope
  10.  
  11.     //混淆变量表
  12.     //比如源码是：var myOldName; 压缩后变成：var e;
  13.     //那么mangled跟rev_mangled分别记录着这个映射关系
  14.     //mangled["myOldName"] = "e"   |    rev_mangled["e"] = "myOldName"
  15.     this.mangled = {};      // mangled names (orig.name => mangled)
  16.     this.rev_mangled = {};  // reverse lookup (mangled => orig.name)
  17.  
  18.     //当前作用域已经混淆的变量个数
  19.     this.cname = -1;        // current mangled name
  20.  
  21.     //当前作用域使用到的引用变量名字
  22.     //比如 function(){var i, j; j = 1;}
  23.     //此时refs = {"j" : }; i仅仅是一个声明 不是一个引用
  24.     this.refs = {};         // names referenced from this scope
  25.  
  26.     //假设在with里边？@unkowned
  27.     this.uses_with = false; // will become TRUE if with() is detected in this or any subscopes
  28.  
  29.     //假设在eval里边？@unkowned
  30.     this.uses_eval = false; // will become TRUE if eval() is detected in this or any subscopes
  31.  
  32.     //作用域的指示性字符串列表。比如:"use strict";
  33.     this.directives = [];   // directives activated from this scope
  34.  
  35.     //当前作用域的父亲作用域。由此能够搞成一个作用域链！
  36.  
  37. this.parent = parent;   // parent scope
  38.  
  39.     //当前作用于的子作用域列表
  40.     this.children = [];     // sub-scopes
  41.  
  42.     //假设设置了父亲，那么在父亲的children加上当前对象。
  43.     //level仅仅嵌套深度
  44.     if (parent) {
  45.         this.level = parent.level + 1;
  46.         parent.children.push(this);
  47.     } else {
  48.         this.level = 0;
  49.     }
  50. };
  51.  
  52. function base54_digits() {
  53.      //你能够自定义混淆的表哦~通过自定义DIGITS_OVERRIDE_FOR_TESTING这个变量
  54.     if (typeof DIGITS_OVERRIDE_FOR_TESTING != "undefined")
  55.         return DIGITS_OVERRIDE_FOR_TESTING;
  56.     else
  57.      //为什么是下边这个字符串？用这个顺序混淆之后 再gzip之后会得到更少的字节
  58.      //这里要了解gzip算法 @unkowned
  59.  
  60.      //见：https://github.com/mishoo/UglifyJS/commit/4072f80ada49f8bd541045690f5f922ff5a43b59
  61.      //Optimize list of digits for generating identifiers for gzip compression.
  62.      //The list is based on reserved words and identifiers used in dot-expressions. It saves a quite a few bytes.
  63.         return "etnrisouaflchpdvmgybwESxTNCkLAOM_DPHBjFIqRUzWXV$JKQGYZ0516372984";
  64. }
  65.  
  66. var base54 = (function(){
  67.     var DIGITS = base54_digits();
  68.     //最后得到的混淆顺序是这样：
  69.     //e t n r …… Z
  70.     //et tt nt rt …… Zt //为什么这里不是 ee te ……
  71.     //……
  72.     return function(num) {
  73.      /*
  74.      //为了第二位数也是从e開始： ee te ……
  75.      //事实上能够优化成这个样子：
  76.         var ret = "", base = 54;//54是前边54个英文+$ 由于不能用数字开头
  77.         var b = 0, maxb = 1 + num > 54 ? Math.ceil((num-54+1)/64) : 0;
  78.         do {
  79.             ret += DIGITS.charAt(num % base);
  80.             b++;
  81.             num = Math.floor(num / base) - 1;
  82.             base = 64;
  83.         } while (num >= 0 && b  0);
  84.         return ret;
  85.     };
  86. })();
  87.  
  88. //作用域对象成员方法
  89. Scope.prototype = {
  90.      //推断在当前作用域上能不能找到变量name
  91.     has: function(name) {
  92.      //沿着作用链一层一层搜索符号表 有木有！
  93.         for (var s = this; s; s = s.parent)
  94.             if (HOP(s.names, name))
  95.                 return s;
  96.     },
  97.  
  98.     //看看当前混淆的名字处于那个作用链上边
  99.     has_mangled: function(mname) {
  100.         for (var s = this; s; s = s.parent)
  101.             if (HOP(s.rev_mangled, mname))
  102.                 return s;
  103.     },
  104.  
  105.     //这个没太大意义
  106.     toJSON: function() {
  107.         return {
  108.             names: this.names,
  109.             uses_eval: this.uses_eval,
  110.             uses_with: this.uses_with
  111.         };
  112.     },
  113.  
  114.     //这个函数就是变量名字混淆的关键了！
  115.     next_mangled: function() {
  116.         // we must be careful that the new mangled name:
  117.         //
  118.         // 1. doesn't shadow a mangled name from a parent
  119.         //    scope, unless we don't reference the original
  120.         //    name from this scope OR from any sub-scopes!
  121.         //    This will get slow.
  122.         //
  123.         // 2. doesn't shadow an original name from a parent
  124.         //    scope, in the event that the name is not mangled
  125.         //    in the parent scope and we reference that name
  126.         //    here OR IN ANY SUBSCOPES!
  127.         //
  128.         // 3. doesn't shadow a name that is referenced but not
  129.         //    defined (possibly global defined elsewhere).
  130.         for (;;) {
  131.           //留意了，通过base54这个函数生成混淆后的名字
  132.             var m = base54(++this.cname), prior;
  133.  
  134.             //有个优先级
  135.  
  136.             // case 1.
  137.             /*
  138.                相应这种情况
  139.                     var name = {};//混淆后得到变量名字a
  140.                     function(){
  141.                          //在这里边要混淆name2这个变量成名字a 发现a已经在父亲作用域时混淆的时候用到了
  142.                          //prior = this.has_mangled("a"); => 父亲作用域
  143.                          //那就得看看在当前作用域内，name有没有被引用了
  144.                          //假设有name.b = 1 那么name2就不能用名字a
  145.                          //否则能够使用名字a
  146.                          var name2 = {};
  147.                          name.b = 1;
  148.                     }
  149.              */
  150.             prior = this.has_mangled(m);
  151.             if (prior && this.refs[prior.rev_mangled[m]] === prior)
  152.                 continue;
  153.  
  154.             // case 2.
  155.             /*
  156.                相应这种情况
  157.                e = {};//这个在父亲作用域有e这个变量
  158.                function(){
  159.                          //this  这里想要把变量name1也混淆成e这个名字
  160.                          var name1;
  161.                          e.a = 1;
  162.                     }
  163.              */
  164.             prior = this.has(m);
  165.             //!prior.has_mangled(m)说明了e这个变量名字不是混淆 而是原始名字 这里能够觉得是全局作用域的引用。
  166.             if (prior && prior !== this && this.refs[m] === prior && !prior.has_mangled(m))
  167.                 continue;
  168.  
  169.             // case 3.
  170.             /*
  171.                相应这种情况
  172.                     name = 1;
  173.                     //这种name是全局对象，通过refs[m]找不到相应的作用域。这种变量名字也不能混淆！
  174.  
  175. */
  176.             if (HOP(this.refs, m) && this.refs[m] == null)
  177.                 continue;
  178.  
  179.             // I got "do" once. :-/
  180.             if (!is_identifier(m))
  181.                 continue;
  182.             return m;
  183.         }
  184.     },
  185.  
  186.     //设置混淆变量名的符号表而已
  187.     set_mangle: function(name, m) {
  188.         this.rev_mangled[m] = name;
  189.         return this.mangled[name] = m;
  190.     },
  191.  
  192.     //获取name变量映射的混淆名
  193.     get_mangled: function(name, newMangle) {
  194.      //在with跟eval里边不混淆变量名！
  195.  
  196. if (this.uses_eval || this.uses_with) return name; // no mangle if eval or with is in use
  197.         var s = this.has(name);
  198.  
  199.         //不在作用域链上的 可能是别的文件定义的全局变量 所以不能混淆！
  200.  
  201. if (!s) return name; // not in visible scope, no mangle
  202.  
  203.         //已经混淆过的。那直接返回就可以
  204.         if (HOP(s.mangled, name)) return s.mangled[name]; // already mangled in this scope
  205.  
  206.         //外部调用指定newMangle = false告诉你不混淆 还混淆个毛线~
  207.         if (!newMangle) return name;                      // not found and no mangling requested
  208.  
  209.         //最后假设发现须要混淆了。那么调用next_mangled得到一个混淆名 同一时候设置好符号表映射关系
  210.         return s.set_mangle(name, s.next_mangled());
  211.     },
  212.  
  213.     //看看name是不是一个引用，下面几个情况都属于引用：
  214.     //在全局域里边的name
  215.     //在with eval里边的变量都属于引用。名字不能混淆
  216.     //或者当前作用域有refs[name]
  217.     references: function(name) {
  218.         return name && !this.parent || this.uses_with || this.uses_eval || this.refs[name];
  219.     },
  220.  
  221.     //记录当前作用域的变量声明
  222.     define: function(name, type) {
  223.         if (name != null) {
  224.             if (type == "var" || !HOP(this.names, name))
  225.                 this.names[name] = type || "var";
  226.             return name;
  227.         }
  228.     },
  229.  
  230.     //@unkowned
  231.     active_directive: function(dir) {
  232.         return member(dir, this.directives) || this.parent && this.parent.active_directive(dir);
  233.     }
  234. };
  235.  
  236. //为当前AST树增加作用域信息
  237. function ast_add_scope(ast) {
  238.  
  239.     var current_scope = null;
  240.     var w = ast_walker(), walk = w.walk;
  241.     var having_eval = [];
  242.  
  243.     function with_new_scope(cont) {
  244.      //为当前生成一个子作用域，增加到作用域链中
  245.         current_scope = new Scope(current_scope);
  246.         current_scope.labels = new Scope();
  247.  
  248.         //拿到作用域块的AST树枝
  249.         var ret = current_scope.body = cont();
  250.  
  251.         //把作用域信息记录在树枝上
  252.         ret.scope = current_scope;
  253.  
  254.         //回到上一层作用域！
  255.         current_scope = current_scope.parent;
  256.         return ret;
  257.     };
  258.  
  259.     function define(name, type) {
  260.         return current_scope.define(name, type);
  261.     };
  262.  
  263.     function reference(name) {
  264.         current_scope.refs[name] = true;
  265.     };
  266.  
  267.     function _lambda(name, args, body) {
  268.         var is_defun = this[0] == "defun";
  269.         return [ this[0], is_defun ? define(name, "defun") : name, args, with_new_scope(function(){
  270.           //进入函数体 要生成一个作用域信息
  271.             if (!is_defun) define(name, "lambda");
  272.             //当前函数声明的參数为此作用域的符号信息
  273.             MAP(args, function(name){ define(name, "arg") });
  274.             return MAP(body, walk);
  275.         })];
  276.     };
  277.  
  278.     function _vardefs(type) {
  279.         return function(defs) {
  280.           //var a = b;
  281.           //b要算进引用列表~
  282.           //a要算进声明列表
  283.             MAP(defs, function(d){
  284.                 define(d[0], type);
  285.                 if (d[1]) reference(d[0]);
  286.             });
  287.         };
  288.     };
  289.  
  290.     function _breacont(label) {
  291.         if (label)
  292.             current_scope.labels.refs[label] = true;
  293.     };
  294.  
  295.     return with_new_scope(function(){
  296.         // process AST
  297.         var ret = w.with_walkers({
  298.             "function": _lambda,
  299.             "defun": _lambda,
  300.             "label": function(name, stat) { current_scope.labels.define(name) },
  301.             "break": _breacont,
  302.             "continue": _breacont,
  303.             "with": function(expr, block) {
  304.                 for (var s = current_scope; s; s = s.parent)
  305.                     s.uses_with = true;
  306.             },
  307.             "var": _vardefs("var"),
  308.             "const": _vardefs("const"),
  309.             "try": function(t, c, f) {
  310.                 if (c != null) return [
  311.                     this[0],
  312.                     MAP(t, walk),
  313.                     [ define(c[0], "catch"), MAP(c[1], walk) ],
  314.                     f != null ? MAP(f, walk) : null
  315.                 ];
  316.             },
  317.             "name": function(name) {
  318.                 if (name == "eval")
  319.                     having_eval.push(current_scope);
  320.                 //留意一下
  321.                 //var a = 1; 这里的a不是引用 仅仅是一个声明
  322.                 //仅仅有在真正使用a的时候才算是引用，比如：
  323.                 //a.b; a=1
  324.                 //留意：for (var a in arr) 这里的a也算是一个引用，由于相当于var a;for(a in arr)
  325.                 reference(name);//记录一下当前作用域使用到的引用
  326.             }
  327.         }, function(){
  328.             return walk(ast);
  329.         });
  330.  
  331.         // the reason why we need an additional pass here is
  332.         // that names can be used prior to their definition.
  333.  
  334.         // scopes where eval was detected and their parents
  335.         // are marked with uses_eval, unless they define the
  336.         // "eval" name.
  337.         //假设某个作用域有使用eval。会导致这条作用域链上边的变量都不能混淆
  338.         MAP(having_eval, function(scope){
  339.             if (!scope.has("eval")) while (scope) {
  340.                 scope.uses_eval = true;
  341.                 scope = scope.parent;
  342.             }
  343.         });
  344.  
  345.         // for referenced names it might be useful to know
  346.         // their origin scope.  current_scope here is the
  347.         // toplevel one.
  348.         //本来 refs = {a:true} 如今要fix成 refs = {a:}
  349.         //须要知道变量a在哪个作用域上被引用，由于这会影响变量名混淆的操作
  350.         function fixrefs(scope, i) {
  351.             // do children first; order shouldn't matter
  352.             for (i = scope.children.length; --i >= 0;)
  353.                 fixrefs(scope.children[i]);
  354.             for (i in scope.refs) if (HOP(scope.refs, i)) {
  355.                 // find origin scope and propagate the reference to origin
  356.                 //找到当前引用变量名字i在哪个作用域声明的！
  357.  
  358. //
  359.                 /*
  360.                     var a = 1;  //当前作用域 => origin | s.parent.parent
  361.                     (functin (){ //当前作用域 =>  s.parent
  362.                               (function(){ //当前作用域 =>  s
  363.                                    a = 1;
  364.                               })
  365.                     })
  366.                     由于在s.parent.parent 以及 s.parent是不知道a被s引用了
  367.                     所以这里要从底层递归上来 记录每个作用域都引用了a 防止a变量在中间某层被认作是一个无用的变量干掉了。
  368.  
  369. */
  370.                 for (var origin = scope.has(i), s = scope; s; s = s.parent) {
  371.                     s.refs[i] = origin;
  372.                     if (s === origin) break;
  373.                 }
  374.             }
  375.         };
  376.         //修复当前作用域的引用
  377.         fixrefs(current_scope);
  378.  
  379.         return ret;
  380.     });
  381. }

变量混淆

  1. //混淆变量名须要在静态分析时候知道当前作用域链
  2. //ast_mangle运行前须要先运行ast_add_scope，把作用域信息记录在树枝上
  3. function ast_mangle(ast, options) {
  4.      //拿到一个遍历器
  5.     var w = ast_walker(), walk = w.walk, scope;
  6.     options = defaults(options, {
  7.         mangle       : true,
  8.         toplevel     : false,
  9.         defines      : null,
  10.         except       : null,
  11.         no_functions : false
  12.     });
  13.  
  14.     //关键函数
  15.     //输入变量名字name 输出混淆后的变量名
  16.     function get_mangled(name, newMangle) {
  17.      //假设參数指定不混淆变量名 那还做啥！
  18.         if (!options.mangle) return name;
  19.  
  20.      //假设參数指定不混淆全局变量 而且当前作用域是在全局上 那还做啥！
  21.         if (!options.toplevel && !scope.parent) return name; // don't mangle toplevel
  22.  
  23.         //你能够为uglify指定一些不要他混淆的变量名
  24.         if (options.except && member(name, options.except))
  25.             return name;
  26.  
  27.         //參数指定不混淆函数变量名：uglify --no-mangle-functions
  28.         //defun 指的是定义的函数，语句块以这样開始：function A(){}
  29.         //留意 var c = function A(){}这种不算defun
  30.         if (options.no_functions && HOP(scope.names, name) &&
  31.             (scope.names[name] == 'defun' || scope.names[name] == 'lambda'))
  32.             return name;
  33.  
  34.         //除了上边不用混淆的情况，其它情况都要混淆
  35.         //详细混淆算法见scope.get_mangled
  36.         return scope.get_mangled(name, newMangle);
  37.     };
  38.  
  39.     //能够自己为某些变量做变量名替换的操作，比如：
  40.     //uglifyjs -o a.js a.js -c --define DEBUG=true
  41.     //那么代码中的DEBUG变量最后会被替换成true
  42.     function get_define(name) {
  43.         if (options.defines) {
  44.             // we always lookup a defined symbol for the current scope FIRST, so declared
  45.             // vars trump a DEFINE symbol, but if no such var is found, then match a DEFINE value
  46.             if (!scope.has(name)) {//留意这个推断。假设当前作用域没有这个变量 才会考虑用參数里边的列表映射替换这个变量！
  47.                 if (HOP(options.defines, name)) {
  48.                     return options.defines[name];
  49.                 }
  50.             }
  51.             return null;
  52.         }
  53.     };
  54.  
  55.     function _lambda(name, args, body) {
  56.         if (!options.no_functions && options.mangle) {//假设函数名须要混淆！
  57.             var is_defun = this[0] == "defun", extra;
  58.             if (name) {
  59.                //假设是函数定义 那么名字要混淆
  60.                 if (is_defun) name = get_mangled(name);
  61.  
  62.                 //假设是这种情况：
  63.                 //(function A(){})(); A函数里边没有引用自己 所以等同于 (function(){})();
  64.                 //(function A(){A();}) A函数递归自己，那么A这个名字就要參与混淆了
  65.                 else if (body.scope.references(name)) {
  66.                     extra = {};//混淆后的名字要记录起来 函数体里边的作用域就不能再用这个名字了
  67.  
  68.                     //当前作用域没有使用with以及eval的情况才干混淆名字
  69.                     if (!(scope.uses_eval || scope.uses_with))
  70.                         name = extra[name] = scope.next_mangled();
  71.                     else
  72.                         extra[name] = name;
  73.                 }
  74.                 else name = null;
  75.             }
  76.         }
  77.         //函数体要在其作用域去混淆变量名
  78.         body = with_scope(body.scope, function(){
  79.           //函数參数名须要混淆
  80.             args = MAP(args, function(name){ return get_mangled(name) });
  81.             return MAP(body, walk);
  82.         }, extra);
  83.         return [ this[0], name, args, body ];
  84.     };
  85.  
  86.     function with_scope(s, cont, extra) {
  87.         var _scope = scope;
  88.         scope = s;
  89.         //extra表示当前作用域已经使用过的混淆名字
  90.         if (extra) for (var i in extra) if (HOP(extra, i)) {
  91.             s.set_mangle(i, extra[i]);
  92.         }
  93.         for (var i in s.names) if (HOP(s.names, i)) {
  94.             get_mangled(i, true);//为当前作用域使用到的名字做混淆
  95.         }
  96.         var ret = cont();
  97.         ret.scope = s;//绑定作用域信息
  98.         scope = _scope;
  99.         return ret;
  100.     };
  101.  
  102.     function _vardefs(defs) {//变量名字混淆
  103.         return [ this[0], MAP(defs, function(d){
  104.             return [ get_mangled(d[0]), walk(d[1]) ];
  105.         }) ];
  106.     };
  107.  
  108.     function _breacont(label) {//label标签的混淆。
  109.         if (label) return [ this[0], scope.labels.get_mangled(label) ];
  110.     };
  111.  
  112.     //自己定义当中一些涉及到须要混淆变量名的树枝遍历器
  113.     return w.with_walkers({
  114.         "function": _lambda,
  115.         "defun": function() {
  116.             // move function declarations to the top when
  117.             // they are not in some block.
  118.             //先混淆函数名以及函数体的变量名字
  119.                //得到一个新的树枝
  120.             var ast = _lambda.apply(this, arguments);
  121.  
  122.             //看看要不要把当前定义提到最前边
  123.             /*
  124.                var a = 1,b = 2;
  125.                function C(){}
  126.                     function D(){}
  127.  
  128.                     事实上能够优化成：
  129.  
  130.                function C(){}
  131.                     function D(){}
  132.                var a = 1,b = 2;
  133.              */
  134.             switch (w.parent()[0]) {
  135.               case "toplevel":
  136.               case "function":
  137.               case "defun":
  138.                //把函数定义提前
  139.                 return MAP.at_top(ast);
  140.             }
  141.             return ast;
  142.         },
  143.         "label": function(label, stat) {
  144.             if (scope.labels.refs[label]) return [
  145.                 this[0],
  146.                //获取label相应的混淆名字
  147.                 scope.labels.get_mangled(label, true),
  148.                 walk(stat)
  149.             ];
  150.             //假设没有一个地方引用当前label 那能够去掉这个label了
  151.             return walk(stat);
  152.         },
  153.         "break": _breacont,
  154.         "continue": _breacont,
  155.         "var": _vardefs,
  156.         "const": _vardefs,
  157.         "name": function(name) {
  158.           //看看当前名字有没有在作用域链声明 有的话才混淆
  159.             return get_define(name) || [ this[0], get_mangled(name) ];
  160.         },
  161.         "try": function(t, c, f) {
  162.             return [ this[0],
  163.                      MAP(t, walk),
  164.                      c != null ? [ get_mangled(c[0]), MAP(c[1], walk) ] : null,
  165.                      f != null ? MAP(f, walk) : null ];
  166.         },
  167.         "toplevel": function(body) {
  168.             var self = this;//为什么这里会有self.scope，由于在ast_add_scope已经为树生成了作用域信息
  169.             return with_scope(self.scope, function(){
  170.                 return [ self[0], MAP(body, walk) ];
  171.             });
  172.         },
  173.         "directive": function() {
  174.           //指示性字符串也提到当前作用域前边
  175.           //function(){var a = 1; "use strict";}
  176.           //优化成 function(){"use strict"; var a = 1;}
  177.             return MAP.at_top(this);
  178.         }
  179.     }, function() {
  180.      //混淆变量名字须要绑定节点的作用域信息！
  181.         return walk(ast_add_scope(ast));
  182.     });
  183. }
  184.  
  185. //辅助方法
  186. var MAP;
  187.  
  188. (function(){
  189.      //遍历一个语句块a的时候
  190.     MAP = function(a, f, o) {
  191.      //可能有函数定义 以及 指示性字符串放到这个块最前边
  192.      //所以top就记录了这些树枝
  193.         var ret = [], top = [], i;
  194.         function doit() {
  195.           //遍历的过程 把AtTop的类型提到top数组
  196.             var val = f.call(o, a[i], i);
  197.             if (val instanceof AtTop) {
  198.                 val = val.v;
  199.                 if (val instanceof Splice) {
  200.                     top.push.apply(top, val.v);
  201.                 } else {
  202.                     top.push(val);
  203.                 }
  204.             }
  205.             //其余的 看看语句能否够忽略 不能忽略的语句放到ret数组
  206.             else if (val != skip) {
  207.                 if (val instanceof Splice) {
  208.                     ret.push.apply(ret, val.v);
  209.                 } else {
  210.                     ret.push(val);
  211.                 }
  212.             }
  213.         };
  214.         if (a instanceof Array) for (i = 0; i < a.length; ++i) doit();
  215.         else for (i in a) if (HOP(a, i)) doit();
  216.  
  217.         //top数组一定排在ret数组之前
  218.         return top.concat(ret);
  219.     };
  220.     MAP.at_top = function(val) { return new AtTop(val) };
  221.     MAP.splice = function(val) { return new Splice(val) };
  222.     var skip = MAP.skip = {};
  223.     function AtTop(val) { this.v = val };
  224.     function Splice(val) { this.v = val };
  225. })();

Javascript变量名混淆细节的更多相关文章

  1. javascript变量名提升

    预解析的过程 代码的执行过程 程序在执行过程,会先将代码读取到内存中检查,会将所有的声明在此时进行标记.所谓的标记就是让js解释器直到有这个名字,后面在使用名字的时候,不会出现未定义的错误,这个标记就 ...

  2. javascript变量名命名规则

    1. js变量名可以包含数字,字母,$及_,不能以数字开头. 2. js变量可以使用中文,但是最好不要这么命名,以避免不必要的麻烦.

  3. JavaScript变量名与函数名的命名规范

    JavaScrip变量名与函数名的命名规范严格遵循以下5条: (1)首字符必须是字母.下划线.$,后跟任意的字母.数字.下划线.$ (2)严格区分大小写 (3)不能使用系统的关键字和保留字 (4)命名 ...

  4. JavaScript变量： 变量命名原则

    变量的命名相对而言没有太多的技术含量,今天整理有关于变量命名相关的原则,主要是想告诉大家,虽然命名没有技术含量,但对于个人编码,或者说一个团队的再次开发及阅读是相当有用的.良好的书写规范可以让你的Ja ...

  5. JavaScript变量命名规则：匈牙利命名法

    匈牙利命名法语法 变量名＝类型+对象描述 类型指变量的类型 对象描述指对象名字全称或名字的一部分,要求有明确含义,命名要容易记忆容易理解. 提示 虽然JavaScript变量表面上没有类型,但是Jav ...

  6. Dotfuscator可以实现混淆代码、变量名修改、字符串加密

    C#编写的代码如果不进行一定程度的混淆和加密,那么是非常容易被反编译进行破解的,特别是对于一些商业用途的C#软件来说,因为盯着的人多,更是极易被攻破.使用VS自带的Dotfuscator可以实现混淆代 ...

  7. JavaScript字符串转换为变量名

    1.将一个字符串转换为变量名 [javascript] view plain copy print? function string_to_name(string){ let _name = 'var ...

  8. JavaScript命名——name不能做变量名

    使用name作为变量名(var name = ‘’),在IE中未引起bug,在Chrome中引起bug但未明确指出命名错误,而是会报其他错误,故不便于发现. 现象原因: javascript中name ...

  9. JavaScript：声明变量名的语法规则

    一.语法规则 1.变量必须使用字母.下划线(_)或者美元符($)开始. 2.然后可以使用任意多个英文字母.数字.下划线(_)或者美元符($)组成. 3.不能使用JS关键词与保留字. 二.示例 var ...

随机推荐

  1. Android -- ViewPager放入多个XML监听每个的控件

    我这这里就用了两个imageButton的监听器,两个XML上分别一个. 昨天做了个Viewpager,今天想试试在上面弄上Button试试,结果,弄不来,然后查文档,没查到...百度了1个多小时才出 ...

  2. MongoDB学习笔记（二）--Capped集合 && GridFS存储文件

    Capped集合                                                            Capped集合的大小是固定的,如果空间都被用完了,新添加的对象 ...

  3. Compiling LIBFFM On OSX 10.9

    原文:http://blog.josephmisiti.com/compiling-libffm-on-osx-10.9/ I recently tried to compile LIBFFM (Fi ...

  4. 移动立方体算法(Marching cubes algorithm)

    百度百科: 医学图像三维重建的方法主要有两大类:一类是三维面绘制,另一类是三维体绘制.体绘制能够更真实地反映物体结构,但由于其运算量大,即使利用高性能的计算机也无法满足实际应用中交互操作的需要.因此, ...

  5. easyui加入自己定义图标

    近期用easyui发现图标挺少的,事实上能够另外加入一个css样式,只是我偷懒,直接在easyui的css里面加入了. 以下是文件夹: icon.css是easyui的默认样式文件.ext_icons ...

  6. Java的泛型中，通配符可以设置上限和下限

    上限:<? extends T> ?是T和T的子类 下限:<? super T> ?是T和T的父类 怎么看待这个上限和下限呢 首先应该想 其实对于Java来说 <? ex ...

  7. 【精】C语言之变量存储类型

  8. 如何用7-zip创建自解压文件，7Z软件如何使用

    1 要创建自解压文件,一般都是双击直接解压到C盘的Program Files文件夹里面,或许还需要在桌面创建一个快捷方式之类的.但是一般的绿色软件除了复制到Program Files还需要运行一下绿化 ...

  9. Proguard随笔

    - ProGuard是一个压缩.优化和混淆Java字节码,它能够删除字节码中无用的类.字段.方法和无用的凝视,还能够对类.字段.方法和属性进行混淆. - 字节码事实上包括了大量的调试信息,从而非常ea ...

  10. Visual Studio 2008破解90天试用期

    Visual Studio 2008破解90天试用期变成正式版的方法: 第一种方法(安装前用): 把iso文件中的setup文件夹中的setup.sdb文件中的[Product Key]下的一行的原来 ...