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 相关文章推荐
锋利的jQuery 要点归纳(一) jQuery选择器
Mar 21 Javascript
JQuery为textarea添加maxlength属性的代码
Apr 07 Javascript
基于jquery的实现简单的表格中增加或删除下一行
Aug 01 Javascript
js中的值类型和引用类型小结 文字说明与实例
Dec 12 Javascript
JQuery+CSS提示框实现思路及代码(纯手工打造)
May 07 Javascript
根据当前时间在jsp页面上显示上午或下午
Aug 18 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
Oct 28 Javascript
bootstrap laydate日期组件使用详解
Jan 04 Javascript
强大的JavaScript响应式图表Chartist.js的使用
Sep 13 Javascript
uni-app 组件里面获取元素宽高的实现
Dec 27 Javascript
详细介绍解决vue和jsp结合的方法
Feb 06 Javascript
vue 解决IOS10低版本白屏的问题
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&mysql(一)
2006/10/09 PHP
如何利用PHP执行.SQL文件
2013/07/05 PHP
php中的常用魔术方法总结
2013/08/02 PHP
PHP header()函数常用方法总结
2014/04/11 PHP
php递归函数三种实现方法及如何实现数字累加
2015/08/07 PHP
PHP学习记录之数组函数
2018/06/01 PHP
根据分辨率不同,调用不同的css文件
2006/08/25 Javascript
jquery实现心算练习代码
2010/12/06 Javascript
mailto的使用技巧分享
2012/12/21 Javascript
代码触发js事件(click、change)示例应用
2013/12/13 Javascript
Jquery遍历checkbox获取选中项value值的方法
2014/02/13 Javascript
浅谈javascript的调试
2015/01/28 Javascript
jQuery手机拨号界面特效代码分享
2015/08/27 Javascript
JS简单实现点击复制链接的方法
2016/08/03 Javascript
nodejs 终端打印进度条实例代码
2017/04/22 NodeJs
详解angularjs实现echart图表效果最简洁教程
2017/11/29 Javascript
基于Vue-cli快速搭建项目的完整步骤
2018/11/03 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
2018/12/06 Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
2020/02/24 Javascript
浅析TypeScript 命名空间
2020/03/19 Javascript
在vue中使用jsonp进行跨域请求接口操作
2020/10/29 Javascript
使用Python编写一个简单的tic-tac-toe游戏的教程
2015/04/16 Python
在PyCharm下使用 ipython 交互式编程的方法
2019/01/17 Python
将pytorch转成longtensor的简单方法
2020/02/18 Python
Python创建文件夹与文件的快捷方法
2020/12/08 Python
python批量提取图片信息并保存的实现
2021/02/05 Python
CSS3控制HTML元素动画效果
2014/02/08 HTML / CSS
使用canvas绘制超炫时钟
2014/12/17 HTML / CSS
HTML5 新标签全部总汇(推荐)
2016/06/13 HTML / CSS
英国最大的女性服装零售商:Dorothy Perkins
2017/03/30 全球购物
自考毕业生自我鉴定
2013/11/04 职场文书
机电专业个人求职信范文
2013/12/30 职场文书
物业工程部岗位职责
2015/02/11 职场文书
2015年新农合工作总结
2015/03/30 职场文书
劳动仲裁撤诉申请书
2015/05/18 职场文书
阿里云k8s服务升级时502错误 springboot项目应用
2022/04/09 Servers