javascript中闭包(Closure)详解


Posted in Javascript onJanuary 06, 2016

在javascript中,函数可看作是一种数据,可以赋值给变量,可以嵌套在另一个函数中。

var fun = function(){
  console.log("平底斜");
}
function fun(){
  var n=10;
  function son(){
    n++;
  }
  son();
  console.log(n);
}
fun(); //11
fun(); //11

我们把上面第二段代码稍微修改下:

var n=10;
function fun(){
  function son(){
    n++;
  }
  son();
  console.log(n);
}
fun(); //11
fun(); //12

看出差别了吗,如果理解不了代码执行结果,请看上一篇博文,关于javascript作用域和作用域链的讲解。

上面这段代码中变量n是全局变量,随时可能被重新赋值,而无需通过fun函数的调用。为了让变量n不受污染,或者说是减少全局变量的污染,我们需要把n放到函数中作为局部变量。

function fun(){
  var n=10;
  function son(){
    n++;
    console.log(n);
  }
  son();
}
fun(); //11
fun(); //11

如果我们可以在全局中直接调用son函数,那么便可以达成想要的效果。son函数现在是作为局部变量存在,要想在全局中访问,一般有两种方法:

一种是赋值给全局变量

var a;
function fun(){
  var n=10;
  a = function son(){
    n++;
    console.log(n);
  }
}
fun(); //son()
a(); //11
a(); //12

另一种是使用return返回值

function fun(){
  var n=10;
  return function son(){
    n++;
    console.log(n);
  }
}
var a=fun();
a(); //11
a(); //12

上面的son()函数就是闭包,某种意义上所有函数都可以看作闭包。闭包就是可以访问外层函数作用域的变量的函数。

var a;
function fun(){
  var n=10;
  a = function son(){
    n++;
    console.log(n);
  }
  return a();
}
fun(); //11
a(); //12
a(); //13
fun(); //11
a(); //12
a(); //13

还是上面那段代码,我们稍微修改下,再看看执行结果,这是因为每次执行fun()函数时都会初始化变量n。

闭包的好处是减少全局变量,避免全局污染,可以将局部变量保存在内存中。但这既是优点又是缺点,一段代码中如果闭包过多,有可能造成内存泄露。由于闭包中局部变量不会被垃圾回收机制回收,所以需要手动赋值为null(关于内存泄露,后期单独开专题)

Javascript 相关文章推荐
仿校内登陆框,精美,给那些很厉害但是没有设计天才的程序员
Nov 24 Javascript
javascript 动态生成私有变量访问器
Dec 06 Javascript
ASP.NET jQuery 实例9  通过控件hyperlink实现返回顶部效果
Feb 03 Javascript
JavaScript基础知识之数据类型
Aug 06 Javascript
js单向链表的具体实现实例
Jun 21 Javascript
js之事件冒泡和事件捕获详细介绍
Oct 28 Javascript
详解webpack打包vue时提取css
May 26 Javascript
详解vue+vueRouter+webpack的简单实例
Jun 17 Javascript
解决vue router组件状态刷新消失的问题
Aug 01 Javascript
JavaScript Dom 绑定事件操作实例详解
Oct 02 Javascript
通过JS判断网页是否为手机打开
Oct 28 Javascript
如何在vue中使用HTML 5 拖放API
Jan 14 Vue.js
果断收藏9个Javascript代码高亮脚本
Jan 06 #Javascript
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
Jan 05 #Javascript
JavaScript实现简单的tab选项卡切换
Jan 05 #Javascript
javascript实现简单的全选和反选功能
Jan 05 #Javascript
Javascript原型链的原理详解
Jan 05 #Javascript
深入浅析JavaScript系列(13):This? Yes,this!
Jan 05 #Javascript
基于javascript实现图片懒加载
Jan 05 #Javascript
You might like
利用js调用后台php进行数据处理原码
2006/10/09 PHP
资料注册后发信小技巧
2006/10/09 PHP
BBS(php & mysql)完整版(三)
2006/10/09 PHP
PHP中文件读、写、删的操作(PHP中对文件和目录操作)
2012/03/06 PHP
php自定义session示例分享
2014/04/22 PHP
php中出现空白页的原因及解决方法汇总
2014/07/08 PHP
浅谈php冒泡排序
2014/12/30 PHP
详解js异步文件加载器
2016/01/24 PHP
PHP7.0连接DB操作实例分析【基于mysqli】
2019/09/26 PHP
PHP 裁剪图片
2021/03/09 PHP
控制打印时页眉角的代码
2007/02/08 Javascript
浅谈Javascript事件处理程序的几种方式
2012/06/27 Javascript
document.documentElement的一些使用技巧
2013/04/18 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
2013/12/27 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
2015/11/18 Javascript
JS函数的几种定义方式分析
2015/12/17 Javascript
通过javascript实现扫雷游戏代码实例
2020/02/09 Javascript
vue实现一个6个输入框的验证码输入组件功能的实例代码
2020/06/29 Javascript
js 数组当前行添加数据方法详解
2020/07/28 Javascript
Python实现生成简单的Makefile文件代码示例
2015/03/10 Python
Python虚拟环境Virtualenv使用教程
2015/05/18 Python
使用PyCharm配合部署Python的Django框架的配置纪实
2015/11/19 Python
Python3利用Dlib19.7实现摄像头人脸识别的方法
2018/05/11 Python
基于python OpenCV实现动态人脸检测
2018/05/25 Python
python zip()函数使用方法解析
2019/10/31 Python
python实现超级玛丽游戏
2020/03/18 Python
Pytorch 使用opnecv读入图像由HWC转为BCHW格式方式
2020/06/02 Python
韩国流行时尚女装网站:Dintchina(中文)
2018/07/19 全球购物
波兰家居和花园家具专家:4Home
2019/05/26 全球购物
医院护士的求职信
2014/01/03 职场文书
大学毕业生推荐信
2014/07/09 职场文书
作风年建设汇报材料
2014/08/14 职场文书
四风问题个人剖析材料
2014/10/07 职场文书
2014年大学生村官工作总结
2014/11/19 职场文书
刘公岛导游词
2015/02/05 职场文书
2015年度保密工作总结
2015/04/24 职场文书