前端基础:在Chrome开发者工具中观察函数调用、作用域链与闭包

断点调试

全文参考:https://www.jianshu.com/p/73122bb3d262

一、基础概念

利用chrome的开发者工具中的断点调试,我们能够一步步观察JavaScript的执行过程,直观感知函数调用栈、作用域链、变量对象、闭包、this等关键信息的变化。因此,断点调试对于快速定位代码错误,以及快速了解代码的执行过程有着非常重要的作用,高级技能

二、认识断点调试工具

断点调试界面
圈出来的6个便签分别是:
resume/pause script execution(F8)
恢复/暂停脚本执行

step over next function call(F10)
跨过,实际表现是不遇到函数时,执行下一步。遇到函数时,不进入函数直接执行下一步。
(简单理解就是执行下一行代码)

step into next function call(F11)
跨入,实际表现是不遇到函数时,执行下一步。遇到到函数时,进入函数执行上下文。
(在进入函数时用的多,可以进入函数内部看调用过程)

step out of current function(F9)
跳出当前函数

deactivate breakpoints(Ctrl+F8)
停用断点

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

函数调用栈(call Stack),这里会显示代码执行过程中,调用栈的变化。

作用域链(Scope),这里会显示当前函数的作用域链。其中Local表示当前的局部变量对象,Closure表示当前作用域链中的闭包。借助此处的作用域链展示,我们可以很直观的判断出一个例子中,到底谁是闭包,对于闭包的深入了解具有非常重要的帮助作用。

XHR/fetch Breakpoints如果想在 XHR 的请求网址包含指定字符串时中断,可以使用 XHR 断点。 DevTools 会在 XHR 调用 send() 的代码行暂停。

三、断点设置

在显示代码行数的地方点击,即可设置一个断点。断点设置有以下几个特点:

1、在单独的变量声明(如果没有赋值),函数声明的那一行,无法设置断点
2、设置断点后刷新页面,JavaScript代码会执行到断点位置处暂停执行,然后可以使用介绍过的几个操作开始调试
3、当你设置多个断点时,Chrome工具会自动判断从最早执行的那个断点开始执行,因此一般设置一个断点就行。

四、实例

看一看demo函数,在执行过程中的表现

思考一下,这个例子中,谁是闭包?
测试环境配置
新建js文件和html文件各一个,在html文件中调用js文件
调试:

1、设置断点,然后刷新页面

断点位置停下后

2、点击上图红色箭头指向的按钮(进入函数),该按钮的作用会根据代码执行顺序,一步步向下执行。在点击的过程中,我们要观察下方Call stack与Scope的变化,以及函数执行位置的变化。

一步步执行,当函数执行到上例子中
baz函数被调用执行,foo形成了闭包
我们可以看到,在Chrome工具的理解中,由于在foo内部声明的baz函数在调用时访问了它的变量a,因此foo成为了闭包。这好像和我们学习到的知识不太一样。我们来看看在《你不知道的js》这本书中的例子中的理解。
你不知道的js中的例子
书中的注释可以明显的看出,作者认为fn为闭包。即baz,这和chrome工具中明显是不一样的。
而在备受大家推崇的《JavaScript高级编程》一书中,是这样定义闭包。
JavaScript高级编程中闭包的定义
书中作者将自己理解的闭包与包含函数所区分
这里Chrome中理解的闭包,与我所阅读的这几本书中的理解的闭包不一样。其实在之前对于闭包分析的文章中,我已经有对这种情况做了一个解读。闭包详解

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

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

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

我们修改一下demo01中的例子,来看看一个非常有意思的变化。

// 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了。我靠,跟我们理解的好像又有点不一样。所以通过这个对比,我们可以确定闭包的形成需要两个条件。

1、在函数内部创建新的函数;
2、新的函数在执行时,访问了函数的变量对象;
还有更有意思的。

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

// 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变量试试看。

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

add执行时,闭包为外层的自执行函数,this指向test
sum执行时,同上
mark执行时,闭包为外层的自执行函数,this指向test
_mark执行时,闭包为外层的自执行函数,this指向window
注意:这里的this指向显示为Object或者Window,大写开头,他们表示的是实例的构造函数,实际上this是指向的具体实例

test.mark能形成闭包,跟下面的补充例子(demo07)情况是一样的。

// demo06

var a = 10;
var obj = {
    a: 20
}

function fn () {
    console.log(this.a);
}

fn.call(obj); // 20

this指向obj
最后继续补充一个例子。

// demo07
function foo() {
    var a = 10;

    function fn1() {
        return a;
    }

    function fn2() {
        return 10;
    }

    fn2();
}

foo();

这个例子,和其他例子不太一样。虽然fn2并没有访问到foo的变量,但是foo执行时仍然变成了闭包。而当我将fn1的声明去掉时,闭包便不会出现了。

那么结合这个特殊的例子,我们可以这样这样定义闭包。

闭包是指这样的作用域(foo),它包含有一个函数(fn1),这个函数(fn1)可以调用被这个作用域所封闭的变量(a)、函数、或者闭包等内容。通常我们通过闭包所对应的函数来获得对闭包的访问。

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

最后,根据以上的摸索情况,再次总结一下闭包:

闭包是在函数被调用执行的时候才被确认创建的。
闭包的形成,与作用域链的访问顺序有直接关系。
只有内部函数访问了上层作用域链中的变量对象时,才会形成闭包,因此,我们可以利用闭包来访问函数内部的变量。
大家也可以根据我提供的这个方法,对其他的例子进行更多的测试。以加强对闭包的理解

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值