利用firebug调试功能辅助了解闭包和this

2019-09-06 14:50 来源:未知

对此跟本人同样,自学javascript且未有任何语言学习经验的人来讲,一起首的时候,javascript的调节和测量试验也是二个很大的难处,非常多基础的东西都必要团结去搜寻,那个进度是不行相当的慢的。

算一算,有段时间没写博客。

想着趁时机将方面那篇闭包博文的配图用firebug再来演示一回,也究竟一点调节和测量检验经验分享。

深夜的时候翻看从前收藏的一个名目好多博文《深切精晓javascript原型和闭包》,

示范代码如下:

讲闭包那节:

复制代码 代码如下:

位置对闭包的一步步上书比较详细况兼配图细致,极度适合初专家。

function fn(){
  var max = 10;
  return function bar(x){
    if (x > max) {
      console.log(x);
    }
  }
}
var fl = fn(),
  max = 100;
fl(15);

对于跟本人同样,自学javascript且从未别的语言学习经验的人的话,一开头的时候,javascript的调整也是叁个不小的困难,相当多基础的事物都要求和谐去寻找,那些进度是非常相当慢的。

  

想着趁机缘将地点这篇闭包博文的配图用firebug再来演示三次,也终于一点调治将养经验分享。

选择firebug——脚本

示范代码如下:

图片 1

function fn(){
  var max = 10;
  return function bar(x){
    if (x > max) {
      console.log(x);
    }
  }
}
var fl = fn(),
  max = 100;
fl(15);

侧边监察和控制栏可以window对象以及变量max、fl、fn。

  

与此同时上边也得以看来window的个性,以location为例,能够一向在“调整台”运维window.location输出,进一步能够window.location.href输出location的href属性值。当然,一般在援引window对象的性质和章程时,无需用“window.xxx”这种形式,而直接运用“xxx”。

选择firebug——脚本

 图片 2

 

侧边监察和控制栏能够window对象以及变量max、fl、fn。

况且上面也能够看到window的性质,以location为例,能够一直在“调整台”运维window.location输出,进一步能够window.location.href输出location的href属性值。当然,一般在引用window对象的属性和措施时,没有供给用“window.xxx”这种样式,而一直动用“xxx”。

言归正传,

言归正传,

归来“脚本”栏,通过打“断点”的措施调节和测量试验javascript和查阅变量值。

有多少个概念能够先精通下:断点、单步步入、单步跳过、单步退出。这里就一窍不通叙了。

此番重大是利用设置断点、单步走入的主意。

能够在右边行标处单击设置断点,断点右键能够正则剖断。

能够安装多少个断点,“断点”栏内能够去除已设置的断点。

这里就间接在script标签的起头处打断点并刷新页面。

此时

1、侧边监察和控制区域原window对象处产生this,并针对性window。在“调整台”输出this.location会收获location同样的结果。

2、全局变量max、fl开端化为undefined

3、fn()是函数注脚,因为剖析器会率先读取函数宣称,并使其在施行其余代码以前可用(能够访谈)

回来“脚本”栏,通过打“断点”的方式调试javascript和查阅变量值。

图片 3

有多少个概念可以先领悟下:断点、单步步向、单步跳过、单步退出。这里就一窍不通叙了。

点击右上角的“单步步向”按键

逐次实践代码并在督查区域查看this、各类变量的值变化以及旅馆的情况。可以和推荐介绍的那篇博客互相参照来看。

 

此番重大是行使设置断点、单步进入的章程。

然后再来二个this的例证

代码如下:

var name = 'The Window';
var obj = {
  name: 'The local',
  getNameFunc: function () {
    console.log(this.name);
    return function () {
      console.log(this.name);
    };
  }
};
var c = obj.getNameFunc();
c();

反之亦然“单步步向”,能够观看在试行c()那行代码的时候,步向到getNameFunc里面,this从指向window对象形成obj,调控台出口‘The local’。

日趋试行能够十显明晰的来看任何代码的运作逻辑。

 

能够在左臂行标处单击设置断点,断点右键能够正则判定。

能够安装多少个断点,“断点”栏内能够去除已设置的断点。

此处就直接在script标签的开始处打断点并刷新页面。

此时

1、右侧监察和控制制区域原window对象处形成this,并针对性window。在“调节台”输出this.location会得到location同样的结果。

2、全局变量max、fl起始化为undefined

3、fn()是函数注解,因为深入分析器会首先读取函数宣称,并使其在实行别的轮代理公司码以前可用(能够访谈)

图片 4

点击右上角的“单步踏向”开关

逐次实行代码并在监督区域查看this、各样变量的值变化以及货仓的场馆。能够和推举的那篇博客互相参照来看。

下一场再来二个this的例子
代码如下:

复制代码 代码如下:

var name = 'The Window';
var obj = {
  name: 'The local',
  getNameFunc: function () {
    console.log(this.name);
    return function () {
      console.log(this.name);
    };
  }
};
var c = obj.getNameFunc();
c();

长久以来“单步踏入”,能够见见在实行c()那行代码的时候,步入到getNameFunc里面,this从指向window对象产生obj,调控台出口‘The local'。

日渐实施能够十鲜明晰的看来任何代码的运作逻辑。

上述便是本文关于选取Firebug的调养功效了然javascript闭包和this的章程总括了,希望我们能够欣赏

您可能感兴趣的篇章:

  • FireBug 调节和测量检验JS入门教程 如何调解JS
  • 动用firebug实行调节和测量试验javascript的演示
  • javascript 在firebug调节和测量检验时用console.log的章程
  • 采纳Firebug对js实行断点调节和测验的图像和文字方法
  • 动用JavaScript检验Firefox浏览器是还是不是启用了Firebug的代码
  • Firebug 字幕文件JSON地址获取代码
  • Javascript 调节和测量检验利器 Firebug使用详解六
  • js之WEB开采调节和测验利器:Firebug 下载
  • javascript判定firebug是不是张开的方式
TAG标签:
版权声明:本文由990888藏宝阁发布于计算机网络,转载请注明出处:利用firebug调试功能辅助了解闭包和this