理解javascript闭包


Posted in Javascript onDecember 15, 2015

什么是javascript闭包?
javascript允许使用内部函数,内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数。当其中一个这样的内部函数在包含它们的外部函数之外被调用时,就会形成闭包。
简单的javascript闭包例子:

<script>
  function f1(){

var n=999;


nAdd=function(){n+=1}


function f2(){



alert(n);


}


return f2;

}

var result=f1();

result(); // 999

nAdd();

result(); // 1000
</script>

在这段代码中,result实际上就是闭包f2函数。它一共运行了两次,第一次的值是999,第二次的值是1000。这证明了,函数f1中的局部变量n一直保存在内存中,并没有在f1调用后被自动清除。
为什么会这样呢?原因就在于f1是f2的父函数,而f2被赋给了一个全局变量,这导致f2始终在内存中,而f2的存在依赖于f1,因此f1也始终在内存中,不会在调用结束后,被垃圾回收机制(garbage collection)回收。
这段代码中另一个值得注意的地方,就是"nAdd=function(){n+=1}"这一行,首先在nAdd前面没有使用var关键字,因此nAdd是一个全局变量,而不是局部变量。其次,nAdd的值是一个匿名函数(anonymous function),而这个匿名函数本身也是一个闭包,所以nAdd相当于是一个setter,可以在函数外部对函数内部的局部变量进行操作。
 闭包的应用:

var singleton = function () {
  var privateVariable;
  function privateFunction(x) {
    ...privateVariable...
  }
 
  return {
    firstMethod: function (a, b) {
      ...privateVariable...
    },
    secondMethod: function (c) {
      ...privateFunction()...
    }
  };
}();

 这个单件通过闭包来实现。通过闭包完成了私有的成员和方法的封装。匿名主函数返回一个对象。对象包含了两个方法,方法1可以方法私有变量,方法2访问内部私有函数。需要注意的地方是匿名主函数结束的地方的'()',如果没有这个'()'就不能产生单件。因为匿名函数只能返回了唯一的对象,而且不能被其他地方调用。这个就是利用闭包产生单件的方法。

闭包的优势:
(1)不增加额外的全局变量,
(2)执行过程中所有变量都是在匿名函数内部。
闭包的缺点:
(1)由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。
(2)闭包会在父函数外部,改变父函数内部变量的值。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private value),这时一定要小心,不要随便改变父函数内部变量的值。

本文就为大家介绍这里,如果大家对javascript闭包还是不够了解,请阅读相关文章进行补充学习,谢谢大家的阅读。

Javascript 相关文章推荐
js控制表单操作的常用代码小结
Aug 15 Javascript
jquery indexOf使用方法
Aug 19 Javascript
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
Dec 14 Javascript
jQuery 中$(this).index与$.each的使用指南
Nov 20 Javascript
jQuery中end()方法用法实例
Jan 08 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
Jan 04 Javascript
JS获取当前页面名称的简单实例
Aug 19 Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 jQuery
JS实现基于拖拽改变物体大小的方法
Jan 23 Javascript
@angular前端项目代码优化之构建Api Tree的方法
Dec 24 Javascript
JavaScript相等运算符的九条规则示例详解
Oct 20 Javascript
详解Vue中的MVVM原理和实现方法
Jul 15 Javascript
jQuery检测滚动条是否到达底部
Dec 15 #Javascript
js实现根据身份证号自动生成出生日期
Dec 15 #Javascript
浅析javascript的return语句
Dec 15 #Javascript
轻松学习Javascript闭包函数
Dec 15 #Javascript
Javascript基于AJAX回调函数传递参数实例分析
Dec 15 #Javascript
javascript实现html页面之间参数传递的四种方法实例分析
Dec 15 #Javascript
js编写贪吃蛇的小游戏
Aug 24 #Javascript
You might like
PHP 程序授权验证开发思路
2009/07/09 PHP
PHP中使用CURL发送get/post请求上传图片批处理功能
2018/10/15 PHP
被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
2010/01/22 Javascript
分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容
2012/04/20 Javascript
js中typeof的用法汇总
2013/12/12 Javascript
jQuery实现动画效果的简单实例
2014/01/27 Javascript
JavaScript实现九九乘法表的简单实例
2016/06/07 Javascript
使用JavaScript获取Request中参数的值方法
2016/09/27 Javascript
详解浏览器渲染页面过程
2017/02/09 Javascript
react 父组件与子组件之间的值传递的方法
2017/09/14 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
2018/09/20 Javascript
js前端如何写一个精确的倒计时代码
2019/10/25 Javascript
Vue的data、computed、watch源码浅谈
2020/04/04 Javascript
探究一道价值25k的蚂蚁金服异步串行面试题
2020/08/21 Javascript
解决vue请求接口第一次成功,第二次失败问题
2020/09/08 Javascript
新手该如何学python怎么学好python?
2008/10/07 Python
python两种遍历字典(dict)的方法比较
2014/05/29 Python
python读取目录下最新的文件夹方法
2018/12/24 Python
python实现弹窗祝福效果
2019/04/07 Python
解决Tensorflow占用GPU显存问题
2020/02/03 Python
python实现串口通信的示例代码
2020/02/10 Python
django中嵌套的try-except实例
2020/05/21 Python
mui几种页面跳转方式对比总结概括
2017/08/18 HTML / CSS
我们是伦敦女孩:WalG
2018/01/08 全球购物
西班牙三叶草药房:Farmacias Trébol
2019/05/03 全球购物
泰国Robinson百货官网:购买知名品牌的商品
2020/02/08 全球购物
Linux上比较文件的命令都有哪些
2013/09/28 面试题
5s标语大全
2014/06/23 职场文书
村道德模范事迹材料
2014/08/28 职场文书
运动会广播稿150字(9篇)
2014/09/20 职场文书
2015社区六五普法工作总结
2015/04/21 职场文书
反腐倡廉学习心得体会范文
2015/08/15 职场文书
单位病假条范文
2015/08/17 职场文书
导游词之桂林
2019/08/20 职场文书
如何更改Win11声音输出设备?Win11声音输出设备四种更改方法
2022/04/08 数码科技