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实现在小方框中浏览大图的代码
Aug 14 Javascript
jquery 图片预加载 自动等比例缩放插件
Dec 25 Javascript
一个基于jquery的文本框记数器
Sep 19 Javascript
JS 对输入框进行限制(常用的都有)
Jul 30 Javascript
用js读、写、删除Cookie代码分享及详细注释说明
Jun 05 Javascript
使用AngularJS中的SCE来防止XSS攻击的方法
Jun 18 Javascript
JavaScript获取URL中参数querystring的方法详解
Oct 11 Javascript
JS基于对象的链表实现与使用方法示例
Jan 31 Javascript
原生JavaScript实现滑动拖动验证的示例代码
Dec 06 Javascript
原生js实现随机点餐效果
Dec 10 Javascript
微信小程序实现上传多个文件 超过10个
Mar 30 Javascript
JavaScript架构localStorage特殊场景下二次封装操作
Jun 21 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
AJAX for PHP简单表数据查询实例
2007/01/02 PHP
新手配置 PHP 调试环境(IIS+PHP+MYSQL)
2007/01/10 PHP
PHP5.3以上版本安装ZendOptimizer扩展
2015/03/27 PHP
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
2011/10/06 Javascript
Javascript 中的 call 和 apply使用介绍
2012/02/22 Javascript
Jquery中children与find之间的区别详细解析
2013/11/29 Javascript
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
2014/06/06 Javascript
详谈JavaScript 匿名函数及闭包
2014/11/14 Javascript
JavaScript实现Flash炫光波动特效
2015/05/14 Javascript
浅析AngularJS中的生命周期和延迟处理
2015/06/18 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
2016/04/29 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
2017/03/08 Javascript
Vue.js结合bootstrap实现分页控件
2017/03/10 Javascript
node打造微信个人号机器人的方法示例
2018/04/26 Javascript
React性能优化系列之减少props改变的实现方法
2019/01/17 Javascript
JavaScript indexOf()原理及使用方法详解
2020/07/09 Javascript
[15:41]教你分分钟做大人——灰烬之灵
2015/03/11 DOTA
Python字符遍历的艺术
2008/09/06 Python
跟老齐学Python之从if开始语句的征程
2014/09/14 Python
Python isinstance函数介绍
2015/04/14 Python
Python3 socket同步通信简单示例
2017/06/07 Python
python复制文件到指定目录的实例
2018/04/27 Python
Python 脚本实现淘宝准点秒杀功能
2019/11/13 Python
python实现大战外星人小游戏实例代码
2019/12/26 Python
Numpy一维线性插值函数的用法
2020/04/22 Python
python单元测试框架pytest的使用示例
2020/10/07 Python
Python基于execjs运行js过程解析
2020/11/27 Python
Magee 1866官网:Donegal粗花呢外套和大衣专家
2019/11/01 全球购物
餐厅总经理岗位职责
2013/12/31 职场文书
上班早退检讨书
2014/01/09 职场文书
创建精神文明单位实施方案
2014/03/08 职场文书
行政前台岗位职责
2015/04/16 职场文书
《迟到》教学反思
2016/02/24 职场文书
基于flask实现五子棋小游戏
2021/05/25 Python
使用redis生成唯一编号及原理示例详解
2021/09/15 Redis
Python如何将list中的string转换为int
2022/07/15 Ruby