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 相关文章推荐
Jquery 弹出层插件实现代码
Oct 24 Javascript
jquery ui dialog ie8出现滚动条的解决方法
Dec 06 Javascript
深入document.write()与HTML4.01的非成对标签的详解
May 08 Javascript
按下Enter焦点移至下一个控件的实现js代码
Dec 11 Javascript
Backbone.js的一些使用技巧
Jul 01 Javascript
JavaScript仿支付宝密码输入框
Dec 29 Javascript
jQuery实现定位滚动条位置
Aug 05 Javascript
微信小程序开发经验总结(推荐)
Jan 11 Javascript
简单谈谈原生js的math对象
Jun 27 Javascript
原生javascript实现的全屏滚动功能示例
Sep 19 Javascript
浅谈一个webpack构建速度优化误区
Jun 24 Javascript
简单了解vue中的v-if和v-show的区别
Oct 08 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 中文和编码判断代码
2010/05/16 PHP
PHP图片处理之图片旋转和图片翻转实例
2014/11/19 PHP
PHP安装threads多线程扩展基础教程
2015/11/17 PHP
javascript脚本调试方法小结
2008/11/24 Javascript
js jq 单击和双击区分示例介绍
2013/11/05 Javascript
jquery自定义滚动条插件示例分享
2014/02/21 Javascript
jQuery表格插件datatables用法总结
2014/09/05 Javascript
js实现仿百度瀑布流的方法
2015/02/05 Javascript
jQuery Easyui 验证两次密码输入是否相等
2016/05/13 Javascript
ajax接收后台数据在html页面显示
2017/02/19 Javascript
Node.js使用gm拼装sprite图片
2017/07/04 Javascript
浅谈Vue父子组件和非父子组件传值问题
2017/08/22 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
2017/08/23 jQuery
Vue中定义全局变量与常量的各种方式详解
2017/08/23 Javascript
JS实现的base64加密解密操作示例
2018/04/18 Javascript
echarts大屏字体自适应的方法步骤
2019/07/12 Javascript
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
2020/12/25 Vue.js
python 实现堆排序算法代码
2012/06/05 Python
Python中声明只包含一个元素的元组数据方法
2014/08/25 Python
Python操作MySQL数据库的三种方法总结
2018/01/30 Python
python tensorflow学习之识别单张图片的实现的示例
2018/02/09 Python
python3库numpy数组属性的查看方法
2018/04/17 Python
Django框架多表查询实例分析
2018/07/04 Python
Tensorflow使用支持向量机拟合线性回归
2018/09/07 Python
Python FtpLib模块应用操作详解
2019/12/12 Python
python 将dicom图片转换成jpg图片的实例
2020/01/13 Python
Python利用Scrapy框架爬取豆瓣电影示例
2020/01/17 Python
美国时尚假发购物网站:Wigsbuy
2019/04/06 全球购物
印度领先的眼镜电子商务网站:Lenskart
2019/12/16 全球购物
经管应届生求职信
2013/11/17 职场文书
《小松树和大松树》教学反思
2014/02/20 职场文书
装修施工安全责任书
2014/07/24 职场文书
领导干部保密承诺书
2014/08/30 职场文书
创业计划书详解
2019/07/19 职场文书
详解nginx安装过程并代理下载服务器文件
2022/02/12 Servers
Redis分布式锁的7种实现
2022/04/01 Redis