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

轻松学习Javascript闭包

轻松学习Javascript闭包

闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现。

当function里嵌套function时,内部的function可以访问外部function里的变量。

function foo(x) { var tmp = 3; function bar(y) {  alert(x + y + (++tmp)); } bar(10);}foo(2)

  不管执行多少次,都会alert 16,因为bar能访问foo的参数x,也能访问foo的变量tmp。

  但,这还不是闭包。当你return的是内部function时,就是一个闭包。内部function会close-over外部function的变量直到内部function结束。

function foo(x) { var tmp = 3; return function (y) {  alert(x + y + (++tmp)); }}var bar = foo(2); // bar 现在是一个闭包bar(10);

  上面的脚本最终也会alert 16,因为虽然bar不直接处于foo的内部作用域,但bar还是能访问x和tmp。

  但是,由于tmp仍存在于bar闭包的内部,所以它还是会自加1,而且你每次调用bar时它都会自加1.

  (考虑到六岁这个限制:我们其实可以建立不止一个闭包方法,比如return它们的数组,也可以把它们设置为全局变量。它们全都指向相同的x和相同的tmp,而不是各自有一份副本。)

  注:现在来整点儿七岁的内容。

  上面的x是一个字面值(值传递),和JS里其他的字面值一样,当调用foo时,实参x的值被复制了一份,复制的那一份作为了foo的参数x。

  那么问题来了,JS里处理object时是用到引用传递的,那么,你调用foo时传递一个object,foo函数return的闭包也会引用最初那个object!

function foo(x) {var tmp = 3;return function (y) { alert(x + y + tmp); x.memb = x.memb ? x.memb + 1 : 1; alert(x.memb); }}var age = new Number(2);var bar = foo(age); // bar 现在是一个引用了age的闭包bar(10);

  不出我们意料,每次运行bar(10),x.memb都会自加1。但需要注意的是x每次都指向同一个object变量——age,运行两次bar(10)后,age.memb会变成2.
  这和HTML对象的内存泄漏有关,呃,不过貌似超出了答题的范围。

  这里有一个不用return关键字的闭包例子:

function closureExample(objID, text, timedelay) {   setTimeout(function() {     document.getElementById(objID).innerHTML = text;   }, timedelay); } closureExample(‘myDiv', ‘Closure is created', 500); 

  JS里的function能访问它们的:

  1. 参数

  2. 局部变量或函数

  3. 外部变量(环境变量?),包括

3.1 全局变量,包括DOM。

3.2 外部函数的变量或函数。

  如果一个函数访问了它的外部变量,那么它就是一个闭包。

  注意,外部函数不是必需的。通过访问外部变量,一个闭包可以维持(keep alive)这些变量。在内部函数和外部函数的例子中,外部函数可以创建局部变量,并且最终退出;但是,如果任何一个或多个内部函数在它退出后却没有退出,那么内部函数就维持了外部函数的局部数据。
  一个典型的例子就是全局变量的使用。

  闭包经常用于创建含有隐藏数据的函数(但并不总是这样)。

var db = (function() {// 创建一个隐藏的object, 这个object持有一些数据// 从外部是不能访问这个object的var data = {};// 创建一个函数, 这个函数提供一些访问data的数据的方法return function(key, val) {  if (val === undefined) { return data[key] } // get  else { return data[key] = val } // set  }// 我们可以调用这个匿名方法// 返回这个内部函数,它是一个闭包})();
db('x'); // 返回 undefineddb('x', 1); // 设置data['x']为1db('x'); // 返回 1// 我们不可能访问data这个object本身// 但是我们可以设置它的成员

下面看下使用闭包的注意点

1)由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。

2)闭包会在父函数外部,改变父函数内部变量的值。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private value),这时一定要小心,不要随便改变父函数内部变量的值。

以上所述是小编给大家介绍的Javascript闭包知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

相关文章

qq安全中心手机密保解绑操作方法

qq安全中心手机密保解绑操作方法

安全中心,操作方法,方法,机密,电脑软件,  关于手机密保如何解绑问题,在此先表示遗憾,因为目前QQ已经不支持解绑功能,因而也不要怀疑为什么找不到“解绑”按钮。但如果是手机更换或者丢失,那么可以通过更换密保手机实现,今天小编给你…

Word文档插入GIF动态的方法是什么

Word文档插入GIF动态的方法是什么

文档,方法,动态,动态图片,电脑软件,  正常情况下word可以插入GIF动画,但是插入的GIF动态图片不会动。那么在Word文档中,应该如何插入动态的图片。以下是小编为您带来的关于Word文档插入GIF动态图片,希望对您有所帮助。Word文档插入GIF动态图…

ppt怎么制作触发器ppt制作触发器的

ppt怎么制作触发器ppt制作触发器的

触发器,步骤,方法,电脑软件,ppt,  PPT触发器是PowerPoint中的一项功能,它可以是一个图片、文字、段落、文本框等,相当于是一个按钮,在PPT中设置好触发器功能后,点击触发器会触发一个操作,该操作可以是多媒体音乐、影片、动画等。那么小面小编…

excel2010调出数据分析的方法excel

excel2010调出数据分析的方法excel

数据分析,方法,电脑软件,strong,  在Excel中录入数据后经常需要对数据进行分析,因此数据分析这个功能很重要,接下来是小编为大家带来的excel2010调出数据分析的方法,供大家参考。excel2010调出数据分析的方法excel2010调出数据分析的方法图1…

word2007模板路径在哪word2007模板

word2007模板路径在哪word2007模板

路径,模板,位置,具体位置,电脑软件,  word模板路径怎么找,最近用word比较多,我用word打开文件的时候,提示说文件错误,后来查资料需要删除word模板文件才能解决这格问题。那么下面小编就教你word2007模板路径在哪。word2007模板路径的位置打开…

jquery仿京东侧边栏导航效果

jquery仿京东侧边栏导航效果

导航,侧边栏,京东,效果,电脑软件,本文实例为大家分享了jquery仿京东侧边栏导航的具体代码,供大家参考,具体内容如下样式代码<style> *{ padding: 0; margin: 0; border: 0; } body{ height: 2000px; } .right_ng{ width: 40px; he…

word2013和2003如何将表格文字居中

word2013和2003如何将表格文字居中

文字居中,如何将,表格,电脑软件,  越是简单的软件,我们越是很难全部掌握,就拿我们经常使用的word来说,我们可能只是了解其中的皮毛,还有很多只是有待我们去学习,就拿将表格中文字居中来说,就有很多方法,那么下面就由小编给大家分享下word2013和2…

怎么在ppt中设计出很漂亮的照片特

怎么在ppt中设计出很漂亮的照片特

照片,很漂亮,特效,电脑软件,ppt,  ppt中可以单间的对图片进行编辑,虽然没有ps图片编辑强大,但是可以制作出一些漂亮的效果。以下是小编为您带来的关于ppt设计出很漂亮的照片特效,希望对您有所帮助。ppt设计出很漂亮的照片特效1、首先启动ppt…

怎么在WPS文字中使用MathType插入

怎么在WPS文字中使用MathType插入

文字,公式,电脑软件,WPS,MathType,  WPS文字中提供了&ldquo;插入对象&rdquo;的功能,配合专业的数学公式编辑软件MathType,即可在WPS实现快速插入公式的功能!以下是小编为您带来的关于WPS中使用MathType插入公式,希望对您有所帮助。WPS中使用…

excel显示公式不显示值的解决方法

excel显示公式不显示值的解决方法

显示,解决方法,公式,电脑软件,excel,  Excel中如何解决显示公式不显示值的问题呢?下面是小编带来的关于excel显示公式不显示值的解决方法,希望阅读过后对你有所启发!excel显示公式不显示值的解决方法(一)显公式不显值步骤:进入&ldquo;公式&rd…

excel2007取消正在配置进度的方法

excel2007取消正在配置进度的方法

配置,取消,方法,步骤,进度,  在使用offic 2007 的时候 是不是经常被自动跳出的&ldquo;配置进度&rdquo;感到抓狂!! oh 天啊 ,打开一个word 要等待好几分钟的 &ldquo;配置进度&rdquo;通过修改文件,可以取消这个配置进度。今天,小编教大家如何…

wps表格如何设置页面布局竖版变横

wps表格如何设置页面布局竖版变横

布局,页面布局,方法,文字,设置,  wps是金山软件公司的一种办公软件,对日常办公起到了重要作用,那么大家对它的一些功能又有多少了解呢?大家知道WPS文字设置成横版和竖体字的方法吗?下面小编马上就告诉大家wps文字布局设置竖版变横版的方法…