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 相关文章推荐
理解 JavaScript 预解析
Oct 25 Javascript
JavaScript CSS 修改学习第四章 透明度设置
Feb 19 Javascript
Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
Jun 28 Javascript
JQuery实现展开关闭层的方法
Feb 17 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
Jan 18 Javascript
JS实现图片点击后出现模态框效果
May 03 Javascript
BootStrap Select清除选中的状态恢复默认状态
Jun 20 Javascript
浅谈vue.js中v-for循环渲染
Jul 26 Javascript
Vue中div contenteditable 的光标定位方法
Aug 25 Javascript
微信公众号开发之微信支付代码记录的实现
Oct 16 Javascript
ElementUI 修改默认样式的几种办法(小结)
Jul 29 Javascript
ant design pro中可控的筛选和排序实例
Nov 17 Javascript
果断收藏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
PHP脚本数据库功能详解(上)
2006/10/09 PHP
yii,CI,yaf框架+smarty模板使用方法
2015/12/29 PHP
Win10 下安装配置IIS + MySQL + nginx + php7.1.7
2017/08/04 PHP
js DOM的学习笔记
2011/12/22 Javascript
jquery延迟加载外部js实现代码
2013/01/11 Javascript
webpack+vue.js实现组件化详解
2016/10/12 Javascript
Bootstrap Modal遮罩弹出层(完整版)
2016/11/21 Javascript
React教程之Props验证的具体用法(Props Validation)
2017/09/04 Javascript
vue使用drag与drop实现拖拽的示例代码
2017/09/07 Javascript
JavaScript模块模式实例详解
2017/10/25 Javascript
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
2018/05/18 Javascript
JavaScript判断数据类型有几种方法及区别介绍
2020/09/02 Javascript
[01:07:17]EG vs Optic Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
在Django的上下文中设置变量的方法
2015/07/20 Python
Python的collections模块中的OrderedDict有序字典
2016/07/07 Python
在Python的一段程序中如何使用多次事件循环详解
2017/09/07 Python
pymysql模块的使用(增删改查)详解
2019/09/09 Python
Python3+Requests+Excel完整接口自动化测试框架的实现
2019/10/11 Python
PyTorch里面的torch.nn.Parameter()详解
2020/01/03 Python
使用Python求解带约束的最优化问题详解
2020/02/11 Python
python中查看.db文件中表格的名字及表格中的字段操作
2020/07/07 Python
python正则表达式的懒惰匹配和贪婪匹配说明
2020/07/13 Python
用python实现前向分词最大匹配算法的示例代码
2020/08/06 Python
PHP面试题及答案二
2015/05/23 面试题
介绍一下linux的文件权限
2012/02/15 面试题
大学毕业生最详细的自我评价分享
2013/11/18 职场文书
先进个人获奖感言
2014/01/24 职场文书
群众路线批评与自我批评
2014/02/06 职场文书
网络编辑职责
2014/03/01 职场文书
工程负责人任命书
2014/06/06 职场文书
2015年物业管理员工工作总结
2015/10/15 职场文书
详解Python魔法方法之描述符类
2021/05/26 Python
python-opencv 中值滤波{cv2.medianBlur(src, ksize)}的用法
2021/06/05 Python
Logback 使用TurboFilter实现日志级别等内容的动态修改操作
2021/08/30 Java/Android
AJAX引擎原理以及XmlHttpRequest对象的axios、fetch区别详解
2022/04/09 Javascript
MySQL中TIMESTAMP类型返回日期时间数据中带有T的解决
2022/12/24 MySQL