爬虫逆向 | 经过断点调试观察JS执行过程

点击“Python编程与实战”，选择“置顶公众号”
javascript

第一时间获取 Python 技术干货！html

前端开发中，有一个重要的技能，叫作断点调试。前端

利用chrome开发者工具中的断点调试，咱们可以一步步观察JavaScript的执行过程，直观感知函数调用栈、做用域链、变量对象、闭包、this等关键信息的变化。所以，断点调试对于快速定位代码错误，以及快速了解代码的执行过程有着很是重要的做用，这也是咱们前端开发必不可少的一个高级技能。java

固然若是你对JavaScript的基础概念（执行上下文，变量对象，闭包，this等）了解还不够的话，想要透彻掌握断点调试可能会有一些困难。好在前面几篇文章中，我都对这些概念进行了详细的概述，所以要掌握这个技能，对你们来讲，应该是比较轻松的。程序员

这篇文章的另外一个目的在于借助对于断点调试的学习，进一步加深对闭包的理解。web

1、基础概念回顾

函数在被调用执行时，会建立一个当前函数的执行上下文。在该执行上下文的建立阶段，变量对象、做用域链、闭包、this指向会分别被肯定。一个JavaScript程序中通常来讲会有多个函数，JavaScript引擎使用函数调用栈来管理这些函数的调用顺序。函数调用栈的调用顺序与栈数据结构一致。chrome

2、认识断点调试工具

在尽可能新版本的chrome浏览器中（不肯定你用的版本与个人一致），调出chrome浏览器的开发者工具。编程

浏览器右上角竖着的三点 -> 更多工具 -> 开发者工具 -> Sources浏览器

界面如图。微信

在个人demo中，我把代码放在app.js，并在index.html中引入。咱们暂时只须要关注截图中红色箭头的地方。在最右侧上方，有一排图标。咱们能够经过使用他们来控制函数的执行顺序。从左到右他们依次是：

resume/pause script execution
恢复/暂停脚本执行

step over next function call
跨过，实际表现是不遇到函数时，执行下一步。遇到函数时，不进入函数直接执行下一步。

step into next function call
跨入，实际表现是不遇到函数时，执行下一步。遇到到函数时，进入函数执行上下文。

step out of current function
跳出当前函数

deactivate breakpoints
停用断点

don‘t pause on exceptions
不暂停异常捕获

其中跨过，跨入，跳出是我使用最多的三个操做。

上图右侧第二个红色箭头指向的是函数调用栈（call Stack），这里会显示代码执行过程当中，调用栈的变化。

右侧第三个红色箭头指向的是做用域链（Scope），这里会显示当前函数的做用域链。其中Local表示当前的局部变量对象，Closure表示当前做用域链中的闭包。借助此处的做用域链展现，咱们能够很直观的判断出一个例子中，到底谁是闭包，对于闭包的深刻了解具备很是重要的帮助做用。

3、断点设置

在显示代码行数的地方点击，便可设置一个断点。断点设置有如下几个特色：

•在单独的变量声明(若是没有赋值)，函数声明的那一行，没法设置断点。•设置断点后刷新页面，JavaScript代码会执行到断点位置处暂停执行，而后咱们就可使用上边介绍过的几个操做开始调试了。•当你设置多个断点时，chrome工具会自动判断从最先执行的那个断点开始执行，所以我通常都是设置一个断点就好了。

4、实例

接下来，咱们借助一些实例，来使用断点调试工具，看一看，咱们的demo函数，在执行过程当中的具体表现。

// demo01
var fn;function foo() { var a = 2; function baz() { console.log(a); } fn = baz;}function bar() { fn();}
foo();bar(); // 2

在向下阅读以前，咱们能够停下来思考一下，这个例子中，谁是闭包？

这是来自《你不知道的js》中的一个例子。因为在使用断点调试过程当中，发现chrome浏览器理解的闭包与该例子中所理解的闭包不太一致，所以专门挑出来，供你们参考。我我的更加倾向于chrome中的理解。

第一步：设置断点，而后刷新页面。

第二步：点击上图红色箭头指向的按钮（step into），该按钮的做用会根据代码执行顺序，一步一步向下执行。在点击的过程当中，咱们要注意观察下方call stack 与 scope的变化，以及函数执行位置的变化。

一步一步执行，当函数执行到上例子中

咱们能够看到，在chrome工具的理解中，因为在foo内部声明的baz函数在调用时访问了它的变量a，所以foo成为了闭包。这好像和咱们学习到的知识不太同样。咱们来看看在《你不知道的js》这本书中的例子中的理解。

书中的注释能够明显的看出，做者认为fn为闭包。即baz，这和chrome工具中明显是不同的。

而在备受你们推崇的《JavaScript高级编程》一书中，是这样定义闭包。

这里chrome中理解的闭包，与我所阅读的这几本书中的理解的闭包不同。其实在以前对于闭包分析的文章中，我已经有对这种状况作了一个解读。闭包详解^[1]

闭包是一个特殊对象，它由执行上下文(代号A)与在该执行上下文中建立的函数(代号B)共同组成。

当B执行时，若是访问了A中变量对象中的值，那么闭包就会产生。

在大多数理解中，包括许多著名的书籍，文章里都以函数B的名字代指这里生成的闭包。而在chrome中，则以执行上下文A的函数名代指闭包。

咱们修改一下demo01中的例子，来看看一个很是有意思的变化。

// demo02var fn;var m = 20;function foo() { var a = 2; function baz(a) { console.log(a); } fn = baz;}function bar() { fn(m);}
foo();bar(); // 20

这个例子在demo01的基础上，我在baz函数中传入一个参数，并打印出来。在调用时，我将全局的变量m传入。输出结果变为20。在使用断点调试看看做用域链。

是否是结果有点意外，闭包没了，做用域链中没有包含foo了。我靠，跟咱们理解的好像又有点不同。因此经过这个对比，咱们能够肯定闭包的造成须要两个条件。

•在函数内部建立新的函数；•新的函数在执行时，访问了函数的变量对象；

还有更有意思的。

咱们继续来看看一个例子。

// demo03
function foo() { var a = 2;
 return function bar() { var b = 9;
 return function fn() { console.log(a); } }}
var bar = foo();var fn = bar();fn();

在这个例子中，fn只访问了foo中的a变量，所以它的闭包只有foo。

修改一下demo03，咱们在fn中也访问bar中b变量试试看。

// demo04
function foo() { var a = 2;
 return function bar() { var b = 9;
 return function fn() { console.log(a, b); } }}
var bar = foo();var fn = bar();fn();

这个时候，闭包变成了两个。分别是bar，foo。

咱们知道，闭包在模块中的应用很是重要。所以，咱们来一个模块的例子，也用断点工具来观察一下。

// demo05(function () {
 var a = 10; var b = 20;
 var test = { m: 20, add: function (x) { return a + x; }, sum: function () { return a + b + this.m; }, mark: function (k, j) { return k + j; } }
 window.test = test;
})();
test.add(100);test.sum();test.mark();
var _mark = test.mark;_mark();

注意：这里的this指向显示为Object或者Window，大写开头，他们表示的是实例的构造函数，实际上this是指向的具体实例

test.mark能造成闭包，跟下面的补充例子（demo07）状况是同样的。

咱们还能够结合断点调试的方式，来理解那些困扰咱们好久的this指向。随时观察this的指向，在实际开发调试中很是有用。

// demo06
var a = 10;var obj = { a: 20}
function fn() { console.log(this.a);}
fn.call(obj); // 20

最后继续补充一个例子。

// demo07function foo() { var a = 10;
 function fn1() { return a; }
 function fn2() { return 10; }
 fn2();}
foo();

这个例子，和其余例子不太同样。虽然fn2并无访问到foo的变量，可是foo执行时仍然变成了闭包。而当我将fn1的声明去掉时，闭包便不会出现了。

那么结合这个特殊的例子，咱们能够这样这样定义闭包。

闭包是指这样的做用域(foo)，它包含有一个函数(fn1)，这个函数(fn1)能够调用被这个做用域所封闭的变量(a)、函数、或者闭包等内容。一般咱们经过闭包所对应的函数来得到对闭包的访问。

更多的例子，你们能够自行尝试，总之，学会了使用断点调试以后，咱们就可以很轻松的了解一段代码的执行过程了。这对快速定位错误，快速了解他人的代码都有很是巨大的帮助。你们必定要动手实践，把它给学会。

最后，根据以上的摸索状况，再次总结一下闭包：

•闭包是在函数被调用执行的时候才被确认建立的。•闭包的造成，与做用域链的访问顺序有直接关系。•只有内部函数访问了上层做用域链中的变量对象时，才会造成闭包，所以，咱们能够利用闭包来访问函数内部的变量。

你们也能够根据我提供的这个方法，对其余的例子进行更多的测试。以增强对闭包的理解

   
     
 
    
    
     
     
     
 
    
    
      
  
     
     
      
      
      
  
     推荐阅读
    
      
  
     
     
      
      
      
  
     

    
      
  
     
     
      
      
      
  
      
       
       19 个接私活平台汇总升级版，你有技术就有钱
 
       一个普通程序员，靠 GitHub 打赏就年入 70 万，要不你也试试
 
       
     
   
     
 
    
    
     
     
     
 
    


THANKS
- End -



   
     
 
    
    
     
     
     
 
    
    
      
  
     
     
      
      
      
  
      
       
        
         
          
           
           点个“在看”必升职加薪喔!

本文分享自微信公众号 - Python编程与实战（GoPy1024）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。