来抓牢对那一个概念的敞亮

2019-11-08 12:15栏目:前端开发
TAG:

前端基础进阶(六):在chrome开发者工具中观察函数调用栈、作用域链与闭包

2017/02/26 · CSS, 基础技术 · 1 评论 · Chrome, 作用域链, 函数调用栈, 闭包

原文出处: 波同学   

图片 1

配图与本文无关

在前端开发中,有一个非常重要的技能,叫做断点调试

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

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

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

原文出处: 波同学   

学习前端也有一段时间了,发现自己对 作用域链 闭包...等一些概念虽然貌似理解会用了,但是可谓知其然不知其所以然,总感觉不太靠谱,所以参考了一些前辈的博客和加上自己的实践,写下这篇文章,来加强对这些概念的理解 (暂不包括es6);

一、基础概念回顾

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

图片 2

内存(堆与栈)

由于JavaScript存在垃圾自动回收机制,所以我们在开发中并不用像C和C++之类语言一样手动去跟踪内存使用情况,所以很多初学者就忽略了这个问题,但是我发现如果真的对内存空间一无所知,对理解一些JavaScript中的概念比如基本类型引用数据类型的区别;比如浅拷贝深拷贝什么不同?还有闭包,原型等是很模糊的。

JavaScript中并没有严格意义上区分栈内存与堆内存。因此我们可以粗浅的理解为JavaScript的所有数据都保存在堆内存中。但是在某些场景,我们仍然需要基于堆栈数据结构的思路进行处理,比如JavaScript的在逻辑上实现了堆栈。因此理解堆栈数据结构的原理与特点任然十分重要。

  • 栈的存取方式先进后出,后进先出(JavaScript中有5种基础数据类型,分别是Undefined、Null、Boolean、Number、String保存在栈内存中)

  • 堆存取数据方式是无序的,但并不影响我们使用,就像JSON格式的数据,我们知道key就能准确拿到value
    引用类型值(对象、数组、函数、正则)保存在堆内存中的对象,变量中保存的实际上只是一个指针,这个指针执行内存中的另一个位置,由该位置保存对象。)

                                                      结合图实例理解
    

图片 3

stack.PNG

       var num1 = 1;
       var num2= num1; //b赋值a,只是简单的数值的拷贝,他们相互独立,互不影响
       num1=3;
       console.log(num2); //1

   var obj1 = {name:'chris',age:'23'};
   var obj2 = obj1;                                            
   obj1.name = 'xxx';
    console.log(obj2); //  {name:'xxx',age:'23'}
    // obj1赋给obj2的是指针(指向内存的地址),当地址指针相同时,尽管他   
    //们相互独立,但是在变量对象中访问到的具体对象实际上是同一个。如图所示。  
二、认识断点调试工具

在尽量新版本的chrome浏览器中(不确定你用的老版本与我的一致),调出chrome浏览器的开发者工具。

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

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

界面如图。

图片 4

断点调试界面

在我的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表示当前作用域链中的闭包。借助此处的作用域链展示,我们可以很直观的判断出一个例子中,到底谁是闭包,对于闭包的深入了解具有非常重要的帮助作用。

配图与本文无关

执行上下文(Execution Context)

执行上下文可以理解为当前代码的执行环境,它会形成一个作用域。JavaScript中的运行环境大概包括三种情况。

  • 全局环境:JavaScript代码运行起来会首先进入该环境
  • 函数环境:当函数被调用执行时,会进入当前函数中执行代码
  • eval(不常用)
    因此在一个JavaScript程序中,必定会产生多个执行上下文,JavaScript引擎会以堆栈的方式来处理它们,这个堆栈,我们称其为函数调用栈(call stack)。栈底永远都是全局上下文,而栈顶就是当前正在执行的上下文。
    结合图实例

图片 5

context.PNG

首先是全局上下文入栈,然后执行代码,直到遇到read(),激活read函数并且创建了它自己的执行上下文
第二步read的执行上下文入栈,执行代码,遇到say(),激活say函数并且创建了它自己的执行上下
第三步say的执行上下文入栈,执行代码
第四步在say的可执行代码中,再没有遇到其他能生成执行上下文的情况,因此这段代码顺利执行完毕,say的上下文从栈中弹出。
第五步say的执行上下文弹出之后,继续执行readr的可执行代码,也没有再遇到其他执行上下文,顺利执行完毕之后弹出。这样就只身下全局上下文了(关闭浏览器出栈)

  function read() {
      console.log(xxx)
  function say() {
      console.log(xxx)
  }
    say();
}  
 read();

一、基础概念回顾
函数在被调用执行时,会创建一个当前函数的执行上下文。在该执行上下文的创建阶段,变量对象、作用域链、闭包、this指向会分别被确定。而一个JavaScript程序中一般来说会有多个函数,JavaScript引擎使用函数调用栈来管理这些函数的调用顺序。函数调用栈的调用顺序与栈数据结构一致。
二、认识断点调试工具
在尽量新版本的chrome浏览器中(不确定你用的老版本与我的一致),调出chrome浏览器的开发者工具。
浏览器右上角竖着的三点 -> 更多工具 -> 开发者工具 -> Sources

界面如图。

图片 6

断点调试界面

在我的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表示当前作用域链中的闭包。借助此处的作用域链展示,我们可以很直观的判断出一个例子中,到底谁是闭包,对于闭包的深入了解具有非常重要的帮助作用。
三、断点设置
在显示代码行数的地方点击,即可设置一个断点。断点设置有以下几个特点:
在单独的变量声明(如果没有赋值),函数声明的那一行,无法设置断点。

设置断点后刷新页面,JavaScript代码会执行到断点位置处暂停执行,然后我们就可以使用上边介绍过的几个操作开始调试了。

当你设置多个断点时,chrome工具会自动判断从最早执行的那个断点开始执行,因此我一般都是设置一个断点就行了。

四、实例
接下来,我们借助一些实例,来使用断点调试工具,看一看,我们的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中的理解。
第一步:设置断点,然后刷新页面。

图片 7

设置断点

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

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

图片 8

baz函数被调用执行,foo形成了闭包

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

图片 9

你不知道的js中的例子

书中的注释可以明显的看出,作者认为fn为闭包。即baz,这和chrome工具中明显是不一样的。
而在备受大家推崇的《JavaScript高级编程》一书中,是这样定义闭包。

图片 10

JavaScript高级编程中闭包的定义

图片 11

书中作者将自己理解的闭包与包含函数所区分

这里chrome中理解的闭包,与我所阅读的这几本书中的理解的闭包不一样。具体这里我先不下结论,但是我心中更加偏向于相信chrome浏览器。
我们修改一下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。在使用断点调试看看作用域链。

图片 12

闭包没了,作用域链中没有包含foo了。

是不是结果有点意外,闭包没了,作用域链中没有包含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。

图片 13

闭包只有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();

图片 14

这个时候闭包变成了两个

这个时候,闭包变成了两个。分别是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();

图片 15

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

图片 16

sum执行时,同上

图片 17

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

图片 18

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

注意:这里的this指向显示为Object或者Window,大写开头,他们表示的是实例的构造函数,实际上this是指向的具体实例
test.mark能形成闭包,跟下面的补充例子(demo07)情况是一样的。

我们还可以结合点断调试的方式,来理解那些困扰我们很久的this指向。随时观察this的指向,在实际开发调试中非常有用。

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

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

    fn.call(obj); // 20

图片 19

this指向obj

补充一个例子

// demo07

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

这个例子,和其他例子不太一样。虽然fn2并没有访问到foo的变量,但是foo执行时仍然变成了闭包。而当我将fn1的声明去掉时,闭包便不会出现了。我暂时也不知道应该如何解释这种情况。只能大概知道与fn1有关,可能浏览器在实现时就认为只要存在访问上层作用域的可能性,就会被当成一个闭包吧。所以暂时就只能将它作为一个特例记住。
更多的例子,大家可以自行尝试,总之,学会了使用断点调试之后,我们就能够很轻松的了解一段代码的执行过程了。这对快速定位错误,快速了解他人的代码都有非常巨大的帮助。大家一定要动手实践,把它给学会。
最后,根据以上的摸索情况,再次总结一下闭包:
闭包是在函数被调用执行的时候才被确认创建的。

闭包的形成,与作用域链的访问顺序有直接关系。

只有内部函数访问了上层作用域链中的变量对象时,才会形成闭包,因此,我们可以利用闭包来访问函数内部的变量。

三、断点设置

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

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

在前端开发中,有一个非常重要的技能,叫做断点调试

四、实例

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

JavaScript

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

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中的理解。

  • 第一步:设置断点,然后刷新页面。

图片 20

设置断点

  • 第二步:点击上图红色箭头指向的按钮(step into),该按钮的作用会根据代码执行顺序,一步一步向下执行。在点击的过程中,我们要注意观察下方call stack 与 scope的变化,以及函数执行位置的变化。

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

图片 21

baz函数被调用执行,foo形成了闭包

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

图片 22

你不知道的js中的例子

书中的注释可以明显的看出,作者认为fn为闭包。即baz,这和chrome工具中明显是不一样的。

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

图片 23

JavaScript高级编程中闭包的定义

图片 24

书中作者将自己理解的闭包与包含函数所区分

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

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

JavaScript

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

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。在使用断点调试看看作用域链。

图片 25

闭包没了,作用域链中没有包含foo了。

是不是结果有点意外,闭包没了,作用域链中没有包含foo了。我靠,跟我们理解的好像又有点不一样。所以通过这个对比,我们可以确定闭包的形成需要两个条件。

  • 在函数内部创建新的函数;
  • 新的函数在执行时,访问了函数的变量对象;

还有更有意思的。

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

JavaScript

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

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。

图片 26

闭包只有foo

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

JavaScript

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

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

图片 27

这个时候闭包变成了两个

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

我们知道,闭包在模块中的应用非常重要。因此,我们来一个模块的例子,也用断点工具来观察一下。

JavaScript

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

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

图片 28

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

图片 29

sum执行时,同上

图片 30

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

图片 31

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

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

上面的所有调用,最少都访问了自执行函数中的test变量,因此都能形成闭包。即使mark方法没有访问私有变量a,b。

我们还可以结合点断调试的方式,来理解那些困扰我们很久的this指向。随时观察this的指向,在实际开发调试中非常有用。

JavaScript

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

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

图片 32

this指向obj

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

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

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

大家也可以根据我提供的这个方法,对其他的例子进行更多的测试,如果发现我的结论有不对的地方,欢迎指出,大家相互学习进步,谢谢大家。

1 赞 2 收藏 1 评论

图片 33

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

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

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

一、基础概念回顾

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

二、认识断点调试工具

在尽量新版本的chrome浏览器中(不确定你用的老版本与我的一致),调出chrome浏览器的开发者工具。

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

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

界面如图。

图片 34

断点调试界面

在我的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表示当前作用域链中的闭包。借助此处的作用域链展示,我们可以很直观的判断出一个例子中,到底谁是闭包,对于闭包的深入了解具有非常重要的帮助作用。

三、断点设置

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

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

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

JavaScript

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

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中的理解。

  • 第一步:设置断点,然后刷新页面。

图片 35

设置断点

  • 第二步:点击上图红色箭头指向的按钮(step into),该按钮的作用会根据代码执行顺序,一步一步向下执行。在点击的过程中,我们要注意观察下方call stack 与 scope的变化,以及函数执行位置的变化。

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

图片 36

baz函数被调用执行,foo形成了闭包

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

图片 37

你不知道的js中的例子

书中的注释可以明显的看出,作者认为fn为闭包。即baz,这和chrome工具中明显是不一样的。

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

图片 38

JavaScript高级编程中闭包的定义

图片 39

书中作者将自己理解的闭包与包含函数所区分

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

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

JavaScript

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

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。在使用断点调试看看作用域链。

图片 40

闭包没了,作用域链中没有包含foo了。

是不是结果有点意外,闭包没了,作用域链中没有包含foo了。我靠,跟我们理解的好像又有点不一样。所以通过这个对比,我们可以确定闭包的形成需要两个条件。

  • 在函数内部创建新的函数;
  • 新的函数在执行时,访问了函数的变量对象;

还有更有意思的。

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

JavaScript

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

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。

图片 41

闭包只有foo

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

JavaScript

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

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

图片 42

这个时候闭包变成了两个

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

我们知道,闭包在模块中的应用非常重要。因此,我们来一个模块的例子,也用断点工具来观察一下。

JavaScript

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

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

图片 43

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

图片 44

sum执行时,同上

图片 45

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

图片 46

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

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

上面的所有调用,最少都访问了自执行函数中的test变量,因此都能形成闭包。即使mark方法没有访问私有变量a,b。

我们还可以结合点断调试的方式,来理解那些困扰我们很久的this指向。随时观察this的指向,在实际开发调试中非常有用。

JavaScript

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

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

图片 47

this指向obj

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

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

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

大家也可以根据我提供的这个方法,对其他的例子进行更多的测试,如果发现我的结论有不对的地方,欢迎指出,大家相互学习进步,谢谢大家。

1 赞 2 收藏 1 评论

版权声明:本文由大奖888-www.88pt88.com-大奖888官网登录发布于前端开发,转载请注明出处:来抓牢对那一个概念的敞亮