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 相关文章推荐
利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解
Jul 24 Javascript
Js 弹出框口并返回值的两种常用方法
Dec 30 Javascript
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
Oct 24 Javascript
js固定DIV高度,超出部分自动添加滚动条的简单方法
Jul 10 Javascript
JsRender for object语法简介
Oct 31 Javascript
jquery实现表单验证并阻止非法提交
Jul 09 Javascript
javascript显示系统当前时间代码
Dec 29 Javascript
nginx部署访问vue-cli搭建的项目的方法
Feb 12 Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
jQuery无冲突模式详解
Jan 17 jQuery
如何基于JS截获动态代码
Dec 25 Javascript
微信小程序实现多图上传
Jun 19 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中防止SQL注入最好的方法是什么
2013/06/10 PHP
php中magic_quotes_gpc对unserialize的影响分析
2014/12/16 PHP
Codeigniter控制器controller继承问题实例分析
2016/01/19 PHP
Laravel 前端资源配置教程
2019/10/18 PHP
Javascript !!的作用
2008/12/04 Javascript
js 禁用浏览器的后退功能的简单方法
2008/12/10 Javascript
各种常用浏览器getBoundingClientRect的解析
2009/05/21 Javascript
window.open以post方式将内容提交到新窗口
2012/12/26 Javascript
jquery改变disabled的boolean状态的三种方法
2013/12/13 Javascript
一个小例子解释如何来阻止Jquery事件冒泡
2014/07/17 Javascript
html文档中的location对象属性理解及常见的用法
2014/08/13 Javascript
jQuery关键词说明插件cluetip使用指南
2015/04/21 Javascript
浅谈js中的三种继承方式及其优缺点
2016/08/10 Javascript
javascript数据类型详解
2017/02/07 Javascript
vue2.0实战之使用vue-cli搭建项目(2)
2017/03/27 Javascript
微信小程序如何实现在线客服功能
2019/10/16 Javascript
Javascript幻灯片播放功能实现过程解析
2020/05/07 Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
2020/07/31 Javascript
python开发之thread实现布朗运动的方法
2015/11/11 Python
Django中间件实现拦截器的方法
2018/06/01 Python
8种用Python实现线性回归的方法对比详解
2019/07/10 Python
python 用所有标点符号分隔句子的示例
2019/07/15 Python
Python简易计算器制作方法代码详解
2019/10/31 Python
python游戏开发的五个案例分享
2020/03/09 Python
jupyter notebook 恢复误删单元格或者历史代码的实现
2020/04/17 Python
Python控制台实现交互式环境执行
2020/06/09 Python
Pyinstaller打包Scrapy项目的实现步骤
2020/09/22 Python
eharmony澳大利亚:网上约会服务
2020/02/29 全球购物
办公室主任职责范文
2013/11/08 职场文书
数学国培研修感言
2014/02/13 职场文书
法律进企业活动方案
2014/03/04 职场文书
2014年医院科室工作总结
2014/12/20 职场文书
毕业生党员个人总结
2015/02/14 职场文书
确保工程质量承诺书
2015/04/29 职场文书
JS的深浅复制详细
2021/10/16 Javascript
springboot+rabbitmq实现智能家居实例详解
2022/07/23 Java/Android