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

javascript闭包功能与用法实例分析

javascript闭包功能与用法实例分析

本文实例讲述了javascript闭包功能与用法。分享给大家供大家参考,具体如下:

理解闭包

闭包这个东西,确实是很麻烦。之前我自己的理解也是有一点误差,所以今天将文章修改修改,争取将自己的理解进一步准确化。

闭包说得通熟易懂一点,就是指有权访问另一个函数作用域的变量的函数。创建闭包的常见方式,就是在一个函数内部创建另外一个函数,并返回

我们这里举一个例子来说明,首先我们在函数f1内部定义一个函数f2。

function f1(){  var n=999;  function f2(){    alert(n); // 999  }}

f2可以访问f1的作用域,反过来就不行了。现在我们想访问f1中的n,在外层却访问不到,怎么办呢?将f2作为f1的返回值就可以了:

function f1(){  var n=999;  function f2(){    alert(n);  }  return f2;}var result=f1();result(); // 999

这个就是闭包。

其实也很简单,那么闭包有什么用呢?

闭包的使用

之前的自己只知道闭包的概念,却并不知道其存在的价值和意义。直到自己在项目中遇到类似的问题后,才发现只有闭包才能解决的情况。

闭包是使用可以带来以下好处

1. 希望一个变量长期驻扎在内存中
2. 避免全局变量的污染
3. 私有成员的存在

我们刚才说到过,闭包可以读取到函数内部的变量,这是由于闭包后函数的堆栈不会释放,也就是说这些值始终保持在内存中。这是一个优点,也是一个缺点。

我们可以通过闭包来实现一个计数器,而不用担心全局变量的污染:

function f1(){  var n=999;  nAdd=function(){n+=1}  function f2(){    alert(n);  }  return f2;}var result=f1();result(); // 999nAdd();result(); // 1000

可以看到n一直存储在内存中,并没有在f1调用后被自动清除。

我们再来看看如何通过闭包来模拟JavaScript中的私有成员:

var aaa = (function(){  var a = 1;  function bbb(){    a++;    alert(a);  }  function ccc(){    a++;    alert(a);  }  return {    b:bbb,    //json结构    c:ccc  }})();aaa.b();  //2aaa.c();  //3

这样就可以提供指定的变量供外界访问了。

闭包解决的问题

这是一个很常见的问题,就是利用javascript处理循环的时候,索引i的值不能有效的利用:

这里改成如下格式,形成10个闭包来解决即可:

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

相关文章

在Word2007中怎样设置默认表格样式

在Word2007中怎样设置默认表格样式

设置,默认,样式,表格,电脑软件,  默认情况下,在Word2007中插入的表格均默认使用普通样式。用户可以将表格样式库中最常用的表格样式作为默认样式,使新插入的表格都使用该样式。以下是小编为您带来的关于在Word2007中设置默认表格样式,希望对…

JQ文件上传之前预览功能的简单实例

JQ文件上传之前预览功能的简单实例

简单实例,分享,文件上传,功能,电脑软件,1、先准备一个divonchange触发事件<input type="file" onchange="preview(this)" ></span><div id="preview"></div>2、写JS代码//上传图片之前预览图片function preview(file){if (file.files…

在Word2007文档中怎么设置剪贴画棱

在Word2007文档中怎么设置剪贴画棱

文档,设置,效果,剪贴画,电脑软件,  在Word2007文档中,用户可以为剪贴画设置棱台效果,从而实现剪贴画的多种立体化效果,例如棱纹、斜面、凸起等棱台效果。以下是小编为您带来的关于在Word2007文档中设置剪贴画棱台效果,希望对您有所帮助。在Wo…

ES6中Array.find | 和findIndex |

ES6中Array.find | 和findIndex |

函数,详解,电脑软件,Array,findIndex,ES6为Array增加了find(),findIndex函数。find()函数用来查找目标元素,找到就返回该元素,找不到返回undefined。findIndex()函数也是查找目标元素,找到就返回元素的位置,找不到就返回-1。他们的都是一个查找…

js字符限制 | 字符截取 一个中文汉

js字符限制 | 字符截取 一个中文汉

字符,字符截取,中文,汉字,两个,html<input type="text" id="txt">核心js代码//字符串截取function getByteVal(val, max) {var returnValue = '';var byteValLen = 0;for (var i = 0; i < val.length; i++) {if (val[i].match(/[^\x…

如何给photoshop安装新的字体

如何给photoshop安装新的字体

安装,字体,方法,电脑软件,photoshop,  给photoshop安装新的字体,也是为了我们可以用到更多不同的字体。但是很多同学还不太清楚。那么接下来下面是小编整理的一些关于如何给photoshop安装新的字体,供您参阅。给photoshop安装新的字体的方法…

javascript基础练习之翻转字符串与

javascript基础练习之翻转字符串与

回文字符串,字符串,基础,回文,电脑软件,翻转字符串翻转字符串(Reverse a String),就是把字符串倒序处理的意思,比如给定一个字符串”hello”,翻转后应该返回”olleh”。测试用例reverseString("hello") 应该返回 “olleh” reverseString(…

php array_reverse 以相反的顺序返

php array_reverse 以相反的顺序返

实例代码,数组,顺序,电脑软件,php,php array_reverse函数返回一个单元顺序相反的数组,该函数有两个参数,第一个参数表示需要处理的数组,第二个参数可选,规定是否保留原始数组的键名。本文章通过实例向大家讲解array_reverse函数的使用方法。需…

怎么查看微信圈的收藏

怎么查看微信圈的收藏

收藏,电脑软件,微信圈,  当我们在微信朋友圈发现可读的值得保存的内容,我们会选择收藏起来,可是收藏起来的东西在哪里可以查看到呢?如果你不知道微信怎么查看收藏,可以看看下面的具体操作。微信圈查看收藏的方法1.打开微信,点击右下角的【我…

微信小程序开发之麦克风动画 帧动

微信小程序开发之麦克风动画 帧动

帧动画,程序开发,动画,淡出,麦克风,想做个录音机,第一步就卡在麦克风动画这里了.先上gif.再吐槽.① 上面gif中声波的动画是个半成品.没有循环播放.在微信小程序的开发文档上找了很久,也没找到循环模式的参数设置.用setInterval()并不执行动…

Photoshop简单几步制作字符文字

Photoshop简单几步制作字符文字

文字,字符,几步,简单,电脑软件,今天为大家介绍Photoshop简单几步制作字符文字方法,只需几步即可完成,好了,下面我们来学习吧!步骤:1、新建一块画布2、选择&ldquo;油漆桶工具&rdquo;,填充为黑色3、选择&ldquo;横排文字工具&rdquo;,设定如下4、在图…

jsp中实现带滚动条的table表格实例

jsp中实现带滚动条的table表格实例

实例代码,滚动条,表格,电脑软件,jsp,如下所示:<div style="width:700px; height:225px; overflow:auto;"> <table border="1" width="100%" cellpadding="0" cellspacing="0"> <tr> <td width="3%">0</td> <td width="7%…