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 相关文章推荐
input+select(multiple) 实现下拉框输入值
May 21 Javascript
JavaScript中九种常用排序算法
Sep 02 Javascript
JavaScript学习小结(一)——JavaScript入门基础
Sep 02 Javascript
Angular2内置指令NgFor和NgIf详解
Aug 03 Javascript
原生JS实现轮播效果+学前端的感受(防止走火入魔)
Aug 21 Javascript
js监听input输入框值的实时变化实例
Jan 26 Javascript
JS数组搜索之折半搜索实现方法分析
Mar 27 Javascript
详解浏览器缓存和webpack缓存配置
Jul 06 Javascript
读懂CommonJS的模块加载
Apr 19 Javascript
Vue项目实现换肤功能的一种方案分析
Aug 28 Javascript
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
Sep 25 Javascript
原生js实现放大镜组件
Jan 22 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处理excel cvs表格的方法实例介绍
2013/05/13 PHP
浅析is_writable的php实现
2013/06/18 PHP
php 获取今日、昨日、上周、本月的起始时间戳和结束时间戳的方法
2013/09/28 PHP
PHP实现导出excel数据的类库用法示例
2016/10/15 PHP
json中换行符的处理方法示例介绍
2014/06/10 Javascript
js实现鼠标感应向下滑动隐藏菜单的方法
2015/02/20 Javascript
jQuery实现仿美橙互联两级导航菜单的方法
2015/03/09 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
2015/09/18 Javascript
JavaScript添加随滚动条滚动窗体的方法
2016/02/23 Javascript
Nodejs学习item【入门手上】
2016/05/05 NodeJs
JS如何实现手机端输入验证码效果
2020/05/13 Javascript
Jquery如何使用animation动画效果改变背景色的代码
2020/07/20 jQuery
压缩包密码破解示例分享(类似典破解)
2014/01/17 Python
Python序列之list和tuple常用方法以及注意事项
2015/01/09 Python
Python排序搜索基本算法之希尔排序实例分析
2017/12/09 Python
Python实现在某个数组中查找一个值的算法示例
2018/06/27 Python
python 批量修改/替换数据的实例
2018/07/25 Python
django项目简单调取百度翻译接口的方法
2019/08/06 Python
Python多线程threading创建及使用方法解析
2020/06/17 Python
Numpy 多维数据数组的实现
2020/06/18 Python
解决pytorch 交叉熵损失输出为负数的问题
2020/07/07 Python
如何Tkinter模块编写Python图形界面
2020/10/14 Python
CSS3中伪元素::before和::after的用法示例
2017/09/18 HTML / CSS
html5将图片转换成base64的实例代码
2016/09/21 HTML / CSS
俄罗斯女装店:12storeez
2019/10/25 全球购物
BSTN意大利:德国街头和运动文化高品质商店
2020/12/22 全球购物
大学生护理专业自荐信
2013/10/03 职场文书
小学新学期教师寄语
2014/01/18 职场文书
函授毕业自我鉴定
2014/02/04 职场文书
企业安全生产责任书
2014/04/14 职场文书
学校领导班子群众路线整改措施
2014/09/16 职场文书
大学生村官个人总结
2015/02/15 职场文书
先进个人自荐书
2015/03/06 职场文书
因工资原因离职的辞职信范文
2015/05/12 职场文书
于丹论语心得观后感
2015/06/15 职场文书
apache基于端口创建虚拟主机的示例
2021/04/24 Servers