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 attachEvent和addEventListener使用方法
Mar 19 Javascript
jQuery 学习第六课 实现一个Ajax的TreeView
May 17 Javascript
利用jquery操作select下拉列表框的代码
Jun 04 Javascript
javascript解析json数据的3种方式
May 08 Javascript
node.js中的fs.truncateSync方法使用说明
Dec 15 Javascript
jQuery实现带动画效果的多级下拉菜单代码
Sep 08 Javascript
js字符串引用的两种方式(必看)
Sep 18 Javascript
js实时获取窗口大小变化的实例代码
Nov 18 Javascript
hovertree插件实现二级树形菜单(简单实用)
Dec 28 Javascript
JS+html5制作简单音乐播放器
Sep 13 Javascript
深入理解Angular.JS中的Scope继承
Jun 04 Javascript
详解HTML5 使用video标签实现选择摄像头功能
Oct 25 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循环获取GET和POST值的代码
2008/04/09 PHP
解决了Ajax、MySQL 和 Zend Framework 的乱码问题
2009/03/03 PHP
PHP语法自动检查的Vim插件
2014/08/11 PHP
对PHP PDO的一些认识小结
2015/01/23 PHP
php连接微软MSSQL(sql server)完全攻略
2016/11/27 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
XHTML-Strict 内允许出现的标签
2006/12/11 Javascript
js 实现无缝滚动 兼容IE和FF
2009/07/15 Javascript
JQuery 遮罩层实现(mask)实现代码
2010/01/09 Javascript
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
2011/02/24 Javascript
在线一元二次方程计算器实例(方程计算器在线计算)
2013/12/22 Javascript
文本域中换行符的替换示例
2014/03/04 Javascript
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
2014/05/27 Javascript
浅谈js中子页面父页面方法 变量相互调用
2016/08/04 Javascript
JavaScript实现审核流程状态的动态显示进度条
2017/03/15 Javascript
详解vue组件化开发-vuex状态管理库
2017/04/10 Javascript
JS中的三个循环小结
2017/06/20 Javascript
微信小程序实现预览图片功能
2020/10/22 Javascript
Vue使用localStorage存储数据的方法
2019/05/27 Javascript
vue 集成 vis-network 实现网络拓扑图的方法
2019/08/07 Javascript
微信小程序 轮播图实现原理及优化详解
2019/09/29 Javascript
javascript Canvas动态粒子连线
2020/01/01 Javascript
[46:28]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
通过Python编写一个简单登录功能过程解析
2019/09/04 Python
Django实现网页分页功能
2019/10/31 Python
澳大利亚买卖正宗二手奢侈品交易平台:Luxe.It.Fwd
2019/10/16 全球购物
中医药大学毕业生自荐信
2013/11/08 职场文书
仓库班组长岗位职责
2013/12/12 职场文书
体育教师自荐信范文
2013/12/16 职场文书
营销总经理岗位职责
2014/02/02 职场文书
十月围城观后感
2015/06/08 职场文书
三八妇女节主持词
2015/07/04 职场文书
干部作风纪律整顿心得体会
2016/01/23 职场文书
《鲁班学艺》读后感3篇
2019/11/27 职场文书
Win10 和 Win11可以共存吗? win10/11产品生命周期/服务更新介绍
2021/11/21 数码科技
python中mongodb包操作数据库
2022/04/19 Python