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 相关文章推荐
多种方法实现load加载完成后把图片一次性显示出来
Feb 19 Javascript
控制文字内容的显示与隐藏示例
Jun 11 Javascript
JavaScript学习笔记之ES6数组方法
Mar 25 Javascript
Jquery实现跨域异步上传文件总结
Feb 03 Javascript
纯js的右下角弹窗实例
Mar 12 Javascript
Three.js获取鼠标点击的三维坐标示例代码
Mar 24 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
Jan 21 Javascript
vue+vant使用图片预览功能ImagePreview的问题解决
Apr 10 Javascript
Element Dialog对话框的使用示例
Jul 26 Javascript
jQuery编写QQ简易聊天框
Aug 27 jQuery
JavaScript+HTML实现学生信息管理系统
Apr 20 Javascript
处理canvas绘制图片模糊问题
May 11 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
全新的PDO数据库操作类php版(仅适用Mysql)
2012/07/22 PHP
Yii中srbac权限扩展模块工作原理与用法分析
2016/07/14 PHP
PHP fopen中文文件名乱码问题解决方案
2020/10/28 PHP
用js实现的抽象CSS圆角效果!!
2007/05/03 Javascript
Javascript 函数对象的多重身份
2009/06/28 Javascript
Mootools 1.2教程 滚动条(Slider)
2009/09/15 Javascript
js字符串的各种格式的转换 ToString,Format
2011/08/08 Javascript
Javascript之this关键字深入解析
2013/11/12 Javascript
JavaScript利用append添加元素报错的解决方法
2014/07/01 Javascript
JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
2014/08/16 Javascript
深入探寻seajs的模块化与加载方式
2015/04/14 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
2017/01/11 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
2017/07/02 Javascript
input输入框内容实时监测(附代码)
2017/08/15 Javascript
详解vue-cli官方脚手架配置
2018/07/20 Javascript
js中apply()和call()的区别与用法实例分析
2018/08/14 Javascript
Vue+Bootstrap收藏(点赞)功能逻辑与具体实现
2020/10/22 Javascript
[52:36]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Java中重定向输出流实现用文件记录程序日志
2015/06/12 Python
Python实现配置文件备份的方法
2015/07/30 Python
解决python文件字符串转列表时遇到空行的问题
2017/07/09 Python
numpy 计算两个数组重复程度的方法
2018/11/07 Python
利用python修改json文件的value方法
2018/12/31 Python
关于python pycharm中输出的内容不全的解决办法
2020/01/10 Python
python matplotlib.pyplot.plot()参数用法
2020/04/14 Python
Python 多进程、多线程效率对比
2020/11/19 Python
院药学专业个人求职信
2013/09/21 职场文书
资产经营总监岗位职责
2013/12/04 职场文书
写给妈妈的道歉信
2014/01/11 职场文书
公司请假条范文
2014/04/11 职场文书
妇女工作先进事迹
2014/08/17 职场文书
2015年度高中教师工作总结
2015/05/26 职场文书
新年晚会主持词开场白
2015/05/28 职场文书
秋菊打官司观后感
2015/06/03 职场文书
小学生暑假生活总结
2015/07/13 职场文书
干部理论学习心得体会
2016/01/21 职场文书