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 相关文章推荐
JS启动应用程序的一个简单例子
May 11 Javascript
js中将字符串转换成json的三种方式
Jan 12 Javascript
如何使Chrome控制台支持多行js模式——意外发现
Jun 13 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
Sep 23 Javascript
jQuery实现三级菜单的代码
May 09 Javascript
js使用Replace结合正则替换重复出现的字符串功能示例
Dec 27 Javascript
jquery实现手机端单店铺购物车结算删除功能
Feb 22 Javascript
React-Native之定时器Timer的实现代码
Oct 04 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 jQuery
关于vue的列表图片选中打钩操作
Sep 09 Javascript
聊聊JS ES6中的解构
Apr 29 Javascript
正则表达式基础与常用验证表达式
Jun 16 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使用CURL不依赖COOKIEJAR获取COOKIE的方法
2015/06/17 PHP
PHP基于单例模式实现的数据库操作基类
2016/01/15 PHP
Yii多表联合查询操作详解
2016/06/02 PHP
PHP7.1新功能之Nullable Type用法分析
2016/09/26 PHP
PHP函数rtrim()使用中的怪异现象分析
2017/02/24 PHP
Laravel 集成微信用户登录和绑定的实现
2019/12/27 PHP
仿迅雷焦点广告效果(JQuery版)
2008/11/19 Javascript
jQuery实战之品牌展示列表效果
2011/04/10 Javascript
原生js 秒表实现代码
2012/07/24 Javascript
jquery中prop()方法和attr()方法的区别浅析
2013/09/06 Javascript
jQuery控制iFrame(实例代码)
2013/11/19 Javascript
Javascript排序算法之计数排序的实例
2014/04/05 Javascript
JavaScript中输出标签的方法
2014/08/27 Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
2015/11/24 Javascript
javascript之Boolean类型对象
2016/06/07 Javascript
JS获取多维数组中相同键的值实现方法示例
2017/01/06 Javascript
Python之os操作方法(详解)
2017/06/15 Python
简单了解Django模板的使用
2017/12/20 Python
详解Python nose单元测试框架的安装与使用
2017/12/20 Python
Python3 实现随机生成一组不重复数并按行写入文件
2018/04/09 Python
ubuntu 16.04下python版本切换的方法
2019/06/14 Python
python 批量解压压缩文件的实例代码
2019/06/27 Python
Python实现JS解密并爬取某音漫客网站
2020/10/23 Python
乔丹诺(Giordano)酒庄德国官网:找到最好的意大利葡萄酒
2017/12/28 全球购物
英国健康和美容技术产品购物网站:CurrentBody
2019/07/17 全球购物
机电专业大学生求职信
2013/10/04 职场文书
医学生职业规划范文
2014/01/05 职场文书
党员民主评议个人总结
2014/10/20 职场文书
2014年销售工作总结范文
2014/12/01 职场文书
我们的节日端午节活动总结
2015/02/11 职场文书
师德师风主题教育活动总结
2015/05/07 职场文书
小学见习报告
2015/06/23 职场文书
2019升学宴主持词范本5篇
2019/10/09 职场文书
新手必备Python开发环境搭建教程
2021/05/28 Python
python 利用PyAutoGUI快速构建自动化操作脚本
2021/05/31 Python
分享几种python 变量合并方法
2022/03/20 Python