当前位置:首页 > 日记 > 正文

javascript闭包详解

javascript闭包详解
在最后一篇文章中,我们对预解释进行了概述。在写这个博客之前,我们计划写几个经典案例。考虑到这些案例比较全面,他们也有这个博客一步一步来。这更容易学习,深入Javascript。

秩序

当一个同事去面试时,面试官问了一个问题:你会写一个壁橱,我会看吗所以同事们很快就写了下面的代码:

复制代码代码如下所示:

函数FN(){

警报('Hello Javascript闭包!啊!妈妈蛋,E文本不好,找翻译写出单词闭包。

}

(FN);
然后面试官摇了摇头说:这怎么可以叫做收尾呢最后,两个人在争吵,同事们都坏了,面试官是什么(这个故事纯属虚构,任何相似纯属巧合)

倒闭可能是很多人眼里的一个大而坏的技术,在很多人眼里只能是封闭的关闭:

例1:

复制代码代码如下所示:

函数FN(){

返回函数(){

警报('example 1);

}

}

FN()()();
示例1 ps:这看起来不是很高级,看起来这个人的水平不是很好。

例2:

复制代码代码如下所示:

(函数(){())

警报('example 2);

});
示例2 ps:这看起来比上一个更高级,第一个括号也增加了分号。为什么要加分号好吧,我们把这个问题留在这里,稍后再谈。

例3:

复制代码代码如下所示:

函数FN(){

警报('example 3)

(});
例3 PS:这是最高级的,简单的挂天,我读得少,你不骗我!

楼主读书不多,只能写这三种封闭,认为博客可以写更多优秀的闭合;所以请停止我徒劳的下一步的研究,作用机理,看来有人已经知道了,肯定是范围,我真的不想加入这场冠军,这差异总是感到一点乐趣,这几件事可以一直在一起,你为什么要重复老习惯,先在守则上:

复制代码代码如下所示:

var = 10;

函数FN(){

警报(N);

var = 9;

警报(N);

}

(FN);
简单地说,我们(主线图只附带Windows绘图软件,请。)。如果你有更好的推荐)分析:
分析1

从图中,我们可以看到两个作用域,一个是窗口范围(顶层范围),另一个是在调用FN时形成的私有域,作用范围是什么,作用域实际上是代码执行的环境,一个学习环境是一所学校的学生,相当于他的行动学派。如果这个学生很调皮,晚上他经常去网吧玩游戏,这相当于形成一个私人的环境,那就是网吧。fanqiangok!这就像一个地主TM板栗自己,不由感叹:少壮不努力,它长大了,还是回到主题,事实上,回调函数的定义是指一段代码的描述(红色方块图),这叫FN时(图绿色框)时,就会形成一个范围,当然,在执行前将预解释代码的范围,我不会告诉你这场将于何时执行完毕后销毁,FN称将形成一个新的范围,然后进行预解释和执行的代码,最后完成了破坏。

理解闭包

我们知道当函数被调用时,一个函数被调用来形成一个私有作用域(执行环境),而私有作用域是一个闭包。让我们回顾一下第一次采访的故事,以及我写的三个例子。它们都是闭包。实际上,这三个例子都是常用的闭包形式。

应用场景

现在有这样一个需求:在HTML页面中有一个UL标记,在UL下有5个LI标记,这需要李的任意点击来弹出被点击的李的索引(索引从0开始),并且HTML结构如下所示。

复制代码代码如下所示:
表1

表2

表3

表4

表5
我很快就写出了下面的代码:

复制代码代码如下所示:

VaR LIS = document.getelementbyid('ul)。GetElementsByTagName(李的);

对于(var i = 0,len = lis.length;我< len;i++){

LIS {我}。onclick =函数(){

警报(一);

};

}
最后的测试是看需求是否完美。
人们发现,不管它击中多少次,它最终会产生结果。需求期望的结果是:单击列表1,弹出0,单击列表2,弹出1,单击列表3,播放2……此时此刻,我只想用这张图片描述当前的心情。
(当样机在设计要求不运行时演示)

怎么这么好,为什么它总是弹出5从理论上讲这是非常正确的,我们不妨画一张图来分析一下。
事实上,我们只是给每个李onclick描述字符串保存功能。字符串的内容是红色框中的内容。如果你还不相信的话,我在照片里就知道了。
Chrome控制台下输入:LIS { 4 }。onclick,其值是函数的描述,当我们点击列表中的第五,相当于LIS { 4 }。onclick(),调用函数的描述,我们知道,函数将形成私人范围内执行,在私人域名的作用是先解释,然后执行代码,在这段时间我会去,不在我的私人领域的角色,然后走到窗边域找到我,所以每个点击弹出5。

显然上面的代码不能满足这个要求,我们的代码是不正确的,我们考虑问题的原因。事实上,原因是每次点击在我下面的窗口中读取时,此时i的值已经是5,所以下面的代码:

方式1:

复制代码代码如下所示:

VaR LIS = document.getelementbyid('ul)。GetElementsByTagName(李的);

函数FN(i){

返回函数(){

警报(一);

}

}

对于(var i = 0,len = lis.length;我< len;i++){

LIS {我} onclick= FN(我);

}
模式二:

复制代码代码如下所示:

VaR LIS = document.getelementbyid('ul)。GetElementsByTagName(李的);
对于(var i = 0,len = lis.length;我< len;i++){

(函数(i){)

LIS {我}。onclick =函数(){

警报(一);

};

})(一);

}
模式三:

复制代码代码如下所示:

VaR LIS = document.getelementbyid('ul)。GetElementsByTagName(李的);
对于(var i = 0,len = lis.length;我< len;i++){

LIS {我}。onclick=函数fn(我){

返回函数(){

警报(一);

}

}(一);

}
一口气写三种方法。相同的想法是将变量i存储为一个私有变量。我来谈谈二号路。当然,我知道其中一个是其余的,按照惯例,我们的图纸是分步分析的。
我所描述的整个代码执行的细节,而值得注意的是,每个李的onclick属性占用(功能(我){…(我)范围。当这个函数被执行时,它不会被销毁,因为它被外部李(李是窗口作用域)占据,所以作用域不会被破坏。当点击任何李时,函数(){警报(i);}将被执行,范围形成,作用域没有i,它将去(函数){…}(i),范围i被找到。最后,当参数找到i时,参数i的值将通过for循环传递。这个例子巧妙地使用闭包来存储值,并完美地解决了这个问题。

PS:刚才说的(功能(我){…(我)为什么在前面的原因是防止分号前面的语句从遗忘的分号,使Javascript犯错误时解析,如此而已。当然,以上情况是标签的原则,可能会有其他方面,如自定义属性的方式通过DOM节点找到路线和主要指标之间的关系,并用这样一种方式来加深对闭包的理解。

总结

关闭不是一个高和坏的故事。其核心是理解函数定义和调用。当函数调用时,将形成一个新的私有域。当域名被占领外,范围不会被破坏。楼主阅读很少,说错了地方请朋友们。同时,感谢您对主线的支持。

相关文章

必须看到:AdobeInDesignCS考试大纲

必须看到:AdobeInDesignCS考试大纲

考试大纲,电脑软件,AdobeInDesignCS,本文整理了Adobe InDesign CS考试大纲,具有一定的参考和帮助的朋友们将参加考试。 Adobe InDesign CS5软件是一个新的定位于专业排版领域。虽然很晚了,这是更加完善和成熟的功能。本文安排了Adobe InDesig…

Javascript获取URL中的参数。

Javascript获取URL中的参数。

参数,电脑软件,Javascript,URL,最近开发的项目需要使用javascript读取URL字符串中的参数值。 通过查阅数据和我们自己的实验,这是成功的。 脚本如下所示: 复制代码代码如下所示: 函数的GetRequest(不同的) { 无功strhref = window.location.href; …

一个由thinkphp3.2.2生成多个缩略

一个由thinkphp3.2.2生成多个缩略

方法,多个,缩略图,电脑软件,在本文中,描述了一种通过thinkphp3.2.2生成多个缩略图的方法分享给你供你参考。 具体实现方法如下: 复制代码如下:公共功能(dz_upload){ / /上传多张照片上传缩略图,缩略图2 如果(isset($ _files { 'ori_img ' })){ …

单选框单选按钮实现方法

单选框单选按钮实现方法

单选按钮,方法,单选框,电脑软件,本文给出了jQuery单选框绑定单击事件实现的一个示例,供大家参考。 具体实现方法如下: 复制代码代码如下所示: 单选单选绑定事件 $(函数(){()) $(:)。Click(函数(){) 警告(…)+ $(this)。瓦迩()); }); }); 颜色:蓝色;} 文本大小:无;} …

Excel2013怎么统计一定范围的数值E

Excel2013怎么统计一定范围的数值E

统计,方法,数值,电脑软件,strong,  在学习和工作的过程中,我们经常会处理excel表格中的数据。很多时候我们会遇到这样的问题:统计一个表格区域内处于大于80范围的数值的个数。当处理的数据比较少的时候,我们可以一个个数,但出于准确性和方便…

PS图象处理软件制作了一个精致典雅

PS图象处理软件制作了一个精致典雅

图标,典雅,图象,处理软件,精致,本教程学习如何用PS图象处理软件做一个精致典雅的itunes10图标、自定义形状工具和图层样式的主要使用面膜。 先看看效果吧。 新建文档600x600像素,背景白色,新建图层填充黑色,添加渐变叠加样式,颜色自定,浅灰色,效…

webstromJavascript开发工具使用指南

webstromJavascript开发工具使用指南

使用指南,开发工具,电脑软件,webstromJavascript,看到webstrom网上的一篇文章,觉得功能很强大。为什么你从阿里巴巴的前端有个想法GitHub文件吗(传说,淘宝建议js webstrom)。 我们可以理解IDE是很多你想要的或你不想要的东西的集成,换句话说,有…

5分钟浪漫情人节

5分钟浪漫情人节

情人节,浪漫,电脑软件,本教程是一个浪漫的情人节PS字体,快速创建纹理介绍给朋友,只需5分钟就可以完成课程,做文字效果真的很漂亮,难度也不大,推荐给朋友,爱可以跟着教程学习。 本教程教ps学习者使用ps快速创建浪漫情人节字体。教程生成的文本很…

Excel在excel2013基地设置密码的操

Excel在excel2013基地设置密码的操

密码,操作,设置,基地,电脑软件,当我们把Excel表格,我们有各种各样的保密要求。例如,我希望只有我可以打开它,和别人打不开,而别人看不到的内容。今天,小编辑教你如何在excel2013设置密码。 在excel2013设置密码的操作步骤: 打开excel表格,点击左…

学习PHP开源项目的源代码指南

学习PHP开源项目的源代码指南

开源项目,学习,源代码,指南,电脑软件,A. First安装源代码,结合它的文档和手册,熟悉它的功能及其应用。 浏览目录结构的源代码,了解各种目录的功能。 三。经过两级以上,我相信你有这个开源的产品有一个初步的了解,现在开始分析它的源代码。在这…

画家画了一个可爱的小老鼠插画。

画家画了一个可爱的小老鼠插画。

插画,画了,画家,老鼠,可爱,本教程介绍一个可爱的小老鼠的插图画家画一个鼠标使用教程是真的很可爱,有点难,因为作者没有附上相应的绘制步骤,它只是说明你的渲染过程,所以你需要学习,你必须有一定的艺术技巧,但教程很实用,转发与朋友分享。 本教程…

PS制作漂亮的双向流线动画效果教程

PS制作漂亮的双向流线动画效果教程

教程,动画效果,双向,漂亮,电脑软件,本教程介绍了一个朋友以ps制作漂亮的双向流线型人物动画的方法。教程产生的效果非常漂亮,难度也不大。建议你喜欢你的朋友一起学习。 双向飘带,这是很好用ps制成,没有太多细节。 下图是根据效果图(第1层和第…