在chrome开发者工具中观察函数调用栈、做用域链与闭包

在chrome开发者工具中观察函数调用栈、做用域链与闭包

 

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

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

为了帮助你们对于this与闭包有更好的了解，也由于上一篇文章里对闭包的定义有一点误差，所以这篇文章里我就以闭包有关的例子来进行断点调试的学习，以便你们及时纠正。在这里认个错，误导你们了，求轻喷 ~ ~

1、基础概念回顾

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

2、认识断点调试工具

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

 

 

1	浏览器右上角竖着的三点 -> 更多工具 -> 开发者工具 -> 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函数，在执行过程当中的具体表现。

 

 

 

 

 

JavaScript

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

// 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的变化，以及函数执行位置的变化。

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

baz函数被调用执行，foo造成了闭包

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

你不知道的js中的例子

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

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

JavaScript高级编程中闭包的定义

书中做者将本身理解的闭包与包含函数所区分

这里chrome中理解的闭包，与我所阅读的这几本书中的理解的闭包不同。具体这里我先不下结论，可是我心中更加偏向于相信chrome浏览器。

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

 

 

 

 

 

JavaScript

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

// demo02 var 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了。

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

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

还有更有意思的。

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

 

 

 

 

 

JavaScript

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

// 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。

闭包只有foo

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

 

 

 

 

 

JavaScript

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

// 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。

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

 

 

 

 

 

JavaScript

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

// 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();

 

add执行时，闭包为外层的自执行函数，this指向test

sum执行时，同上

mark执行时，闭包为外层的自执行函数，this指向test

_mark执行时，闭包为外层的自执行函数，this指向window

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

上面的全部调用，最少都访问了自执行函数中的test变量，所以都能造成闭包。即便mark方法没有访问私有变量a，b。

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

 

 

 

 

 

JavaScript

 

1 2 3 4 5 6 7 8 9 10 11 12

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

 

this指向obj

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

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

• 闭包是在函数被调用执行的时候才被确认建立的。
• 闭包的造成，与做用域链的访问顺序有直接关系。
• 只有内部函数访问了上层做用域链中的变量对象时，才会造成闭包，所以，咱们能够利用闭包来访问函数内部的变量。
• chrome中理解的闭包，与《你不知道的js》与《JavaScript高级编程》中的闭包理解有很大不一样，我我的更加倾向于相信chrome。这里就不妄下结论了，你们能够根据个人思路，探索后自行确认。在以前一篇文中我根据从书中学到的下了定义，应该是错了，目前已经修改，对不起你们了。