配图与本文无关
在前端开发中,有一个非常重要的技能 , 叫做断点调试 。
在的开发者工具中,通过断点调试 , 我们能够非常方便的一步一步的观察的执行过程 , 直观感知函数调用栈 , 作用域链,变量对象,闭包,this等关键信息的变化 。因此,断点调试对于快速定位代码错误 , 快速了解代码的执行过程有着非常重要的作用,这也是我们前端开发者必不可少的一个高级技能 。
当然如果你对的这些基础概念[执行上下文,变量对象 , 闭包 , this等]了解还不够的话 , 想要透彻掌握断点调试可能会有一些困难 。但是好在在前面几篇文章 , 我都对这些概念进行了详细的概述,因此要掌握这个技能,对大家来说,应该是比较轻松的 。
为了帮助大家对于this与闭包有更好的了解,也因为上一篇文章里对闭包的定义有一点偏差,因此这篇文章里我就以闭包有关的例子来进行断点调试的学习,以便大家及时纠正 。在这里认个错,误导大家了,求轻喷 ~ ~
一、基础概念回顾
函数在被调用执行时,会创建一个当前函数的执行上下文 。在该执行上下文的创建阶段 , 变量对象、作用域链、闭包、this指向会分别被确定 。而一个程序中一般来说会有多个函数,引擎使用函数调用栈来管理这些函数的调用顺序 。函数调用栈的调用顺序与栈数据结构一致 。
二、认识断点调试工具
在尽量新版本的浏览器中(不确定你用的老版本与我的一致),调出浏览器的开发者工具 。
浏览器右上角竖着的三点 -> 更多工具 -> 开发者工具 -> Sources
界面如图 。
断点调试界面
在我的demo中,我把代码放在app.js中,在index.html中引入 。我们暂时只需要关注截图中红色箭头的地方 。在最右侧上方,有一排图标 。我们可以通过使用他们来控制函数的执行顺序 。从左到右他们依次是:
其中跨过,跨入,跳出是我使用最多的三个操作 。
上图右侧第二个红色箭头指向的是函数调用栈(call Stack),这里会显示代码执行过程中,调用栈的变化 。
右侧第三个红色箭头指向的是作用域链(Scope),这里会显示当前函数的作用域链 。其中Local表示当前的局部变量对象,表示当前作用域链中的闭包 。借助此处的作用域链展示,我们可以很直观的判断出一个例子中,到底谁是闭包,对于闭包的深入了解具有非常重要的帮助作用 。
三、断点设置
在显示代码行数的地方点击,即可设置一个断点 。断点设置有以下几个特点:
四、实例
接下来,我们借助一些实例,来使用断点调试工具,看一看,我们的demo函数,在执行过程中的具体表现 。
// demo01var fn;function foo() {var a = 2;function baz() { console.log( a );}fn = baz; }function bar() {fn(); }foo();bar(); // 2
在向下阅读之前 , 我们可以停下来思考一下,这个例子中,谁是闭包?
这是来自《你不知道的js》中的一个例子 。由于在使用断点调试过程中,发现浏览器理解的闭包与该例子中所理解的闭包不太一致,因此专门挑出来,供大家参考 。我个人更加倾向于中的理解 。
设置断点
一步一步执行,当函数执行到上例子中
baz函数被调用执行,foo形成了闭包
我们可以看到 , 在工具的理解中,由于在foo内部声明的baz函数在调用时访问了它的变量a , 因此foo成为了闭包 。这好像和我们学习到的知识不太一样 。我们来看看在《你不知道的js》这本书中的例子中的理解 。
你不知道的js中的例子
书中的注释可以明显的看出,作者认为fn为闭包 。即baz,这和工具中明显是不一样的 。
而在备受大家推崇的《高级编程》一书中,是这样定义闭包 。
高级编程中闭包的定义
书中作者将自己理解的闭包与包含函数所区分
这里中理解的闭包 , 与我所阅读的这几本书中的理解的闭包不一样 。具体这里我先不下结论,但是我心中更加偏向于相信浏览器 。
我们修改一下中的例子,来看看一个非常有意思的变化 。
// 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
这个例子在的基础上 , 我在baz函数中传入一个参数,并打印出来 。在调用时,我将全局的变量m传入 。输出结果变为20 。在使用断点调试看看作用域链 。
闭包没了,作用域链中没有包含foo了 。
是不是结果有点意外 , 闭包没了,作用域链中没有包含foo了 。我靠,跟我们理解的好像又有点不一样 。所以通过这个对比,我们可以确定闭包的形成需要两个条件 。
还有更有意思的 。
我们继续来看看一个例子 。
// demo03function 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
![六 前端基础进阶:在chrome开发者工具中观察函数调用栈、作用域链与闭包](http://img.gansulong.com/240111/0A9493152-0.png)
文章插图
修改一下 , 我们在fn中也访问bar中b变量试试看 。
// demo04function 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();
add执行时,闭包为外层的自执行函数,this指向test
sum执行时,同上
mark执行时,闭包为外层的自执行函数,this指向test
_mark执行时,闭包为外层的自执行函数,this指向
注意:这里的this指向显示为或者,大写开头,他们表示的是实例的构造函数,实际上this是指向的具体实例
test.mark能形成闭包,跟下面的补充例子()情况是一样的 。
我们还可以结合点断调试的方式,来理解那些困扰我们很久的this指向 。随时观察this的指向,在实际开发调试中非常有用 。
// demo06var a = 10;var obj = {a: 20}function fn () {console.log(this.a);}fn.call(obj); // 20
this指向obj
补充一个例子
// demo07function foo() {var a = 10;function fn1() {return a;}function fn2() {return 10;}fn2();}foo();
这个例子 , 和其他例子不太一样 。虽然fn2并没有访问到foo的变量,但是foo执行时仍然变成了闭包 。而当我将fn1的声明去掉时,闭包便不会出现了 。我暂时也不知道应该如何解释这种情况 。只能大概知道与fn1有关,可能浏览器在实现时就认为只要存在访问上层作用域的可能性 , 就会被当成一个闭包吧 。所以暂时就只能将它作为一个特例记住 。
更多的例子 , 大家可以自行尝试,总之,学会了使用断点调试之后,我们就能够很轻松的了解一段代码的执行过程了 。这对快速定位错误,快速了解他人的代码都有非常巨大的帮助 。大家一定要动手实践,把它给学会 。
最后 , 根据以上的摸索情况,再次总结一下闭包:
【六前端基础进阶:在chrome开发者工具中观察函数调用栈、作用域链与闭包】大家也可以根据我提供的这个方法,对其他的例子进行更多的测试,如果发现我的结论有不对的地方 , 欢迎指出,大家相互学习进步,谢谢大家 。
- 十二生肖六畜是指哪六畜 六畜是指哪六畜
- 四六级毕业后还能考吗 四六级毕业后还能考吗知乎
- 水浒传第62回概括 水浒传第62回概括200字
- 水浒传96回概括100字 水浒传96回概括
- 基础知识——程序保护
- 前端向 浅谈WEB安全性
- 如何学骑电动车 如何学骑电动车零基础
- 英语六级缺考的话下次是不是不能报名了 英语六级缺考会禁止下次报考吗
- 六安瓜片的由来 六安瓜片的由来?
- 24式太极拳第六式倒卷肱 倒卷肱在24式太极拳出现了几次