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 相关文章推荐
基于Web标准的UI组件 — 树状菜单(2)
Sep 18 Javascript
刷新页面实现方式总结(HTML,ASP,JS)
Nov 13 Javascript
利用div+jquery自定义滚动条样式的2种方法
Jul 18 Javascript
客户端js性能优化小技巧整理
Nov 05 Javascript
js取float型小数点后两位数的方法
Jan 18 Javascript
jQuery的css()方法用法实例
Dec 24 Javascript
JavaScript插件化开发教程(五)
Feb 01 Javascript
js实现上传图片及时预览
May 07 Javascript
AngularJS ng-change 指令的详解及简单实例
Jul 30 Javascript
Bootstrap和Java分页实例第二篇
Dec 23 Javascript
vue2 设置router-view默认路径的实例
Sep 20 Javascript
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
Sep 30 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 base64+gzinflate压缩编码和解码代码
2008/10/03 PHP
php中ftp_chdir与ftp_cdup函数用法
2014/11/18 PHP
PHP的时间戳与具体时间转化的简单实现
2016/06/13 PHP
浅谈php fopen下载远程文件的函数
2016/11/18 PHP
js冒泡法和数组转换成字符串示例代码
2013/08/14 Javascript
JavaScript的Number对象的toString()方法
2015/12/18 Javascript
jQuery常用知识点总结以及平时封装常用函数
2016/02/23 Javascript
Javascript基础_简单比较undefined和null 值
2016/06/14 Javascript
jQuery checkbox选中问题之prop与attr注意点分析
2016/11/15 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
2017/12/06 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
2019/05/12 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
2019/07/23 Javascript
jQuery表单校验插件validator使用方法详解
2020/02/18 jQuery
一文读懂vue动态属性数据绑定(v-bind指令)
2020/07/20 Javascript
vue 遮罩层阻止默认滚动事件操作
2020/07/28 Javascript
[54:05]DOTA2-DPC中国联赛定级赛 SAG vs iG BO3第一场 1月9日
2021/03/11 DOTA
python 七种邮件内容发送方法实例
2014/04/22 Python
Python的dict字典结构操作方法学习笔记
2016/05/07 Python
python+django快速实现文件上传
2016/10/24 Python
Python 登录网站详解及实例
2017/04/11 Python
对Python3中的input函数详解
2018/04/22 Python
使用python实现快速搭建简易的FTP服务器
2018/09/12 Python
python用for循环求和的方法总结
2019/07/08 Python
python 利用pywifi模块实现连接网络破解wifi密码实时监控网络
2019/09/16 Python
python openvc 裁剪、剪切图片 提取图片的行和列
2019/09/19 Python
python实现简单坦克大战
2020/03/27 Python
Win 10下Anaconda虚拟环境的教程
2020/05/18 Python
Python控制鼠标键盘代码实例
2020/12/08 Python
美国休闲服装品牌:J.Crew Factory
2017/03/04 全球购物
中科软测试工程师面试题
2012/06/16 面试题
小学美术教学反思
2014/02/01 职场文书
社区居务公开实施方案
2014/03/27 职场文书
销售团队激励口号
2014/06/06 职场文书
致地震灾区的慰问信
2015/03/23 职场文书
2015年房地产个人工作总结
2015/05/26 职场文书
Python通过loop.run_in_executor执行同步代码 同步变为异步
2022/04/11 Python