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 相关文章推荐
IE浏览器打印的页眉页脚设置解决方法
Dec 08 Javascript
jQuery select表单提交省市区城市三级联动核心代码
Jun 09 Javascript
angularJS 中$attrs方法使用指南
Feb 09 Javascript
javascript动态添加checkbox复选框的方法
Dec 23 Javascript
对象转换为原始值的实现方法
Jun 06 Javascript
利用prop-types第三方库对组件的props中的变量进行类型检测
May 02 Javascript
vue2.0中click点击当前li实现动态切换class
Jun 21 Javascript
p5.js入门教程之小球动画示例代码
Mar 15 Javascript
深入了解javascript 数组的sort方法
Jun 01 Javascript
vue弹窗插件实战代码
Sep 08 Javascript
如何在Vue.JS中使用图标组件
Aug 04 Javascript
vue3 自定义图片放大器效果的示例代码
Jul 23 Vue.js
果断收藏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 magic_quotes_gpc的一点认识与分析
2008/08/18 PHP
PHP 简易输出CSV表格文件的方法详解
2013/06/20 PHP
服务器上配置PHP运行环境教程
2015/02/12 PHP
PHP图片加水印实现方法
2016/05/06 PHP
PHP设计模式之原型模式定义与用法详解
2018/04/03 PHP
Laravel 修改默认日志文件名称和位置的例子
2019/10/17 PHP
点击文章内容处弹出页面代码
2009/10/01 Javascript
javascript qq右下角滑出窗口 sheyMsg
2010/03/21 Javascript
工作中常用到的JS表单验证代码(包括例子)
2010/11/11 Javascript
javascript拓展DOM操作 prependChild insertAfert
2010/11/17 Javascript
仿中关村在线首页弹出式广告插件(jQuery版)
2012/05/03 Javascript
js判断背景图片是否加载成功使用img的width实现
2013/05/29 Javascript
javascript打印html内容功能的方法示例
2013/11/28 Javascript
JavaScript实现上下浮动的窗口效果代码
2015/10/12 Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
2016/05/24 Javascript
JavaScript组合模式学习要点
2016/08/26 Javascript
Html5+jQuery+CSS制作相册小记录
2016/12/30 Javascript
jQuery绑定事件方法及区别(bind,click,on,live,one)
2017/08/14 jQuery
vue仿淘宝订单状态的tab切换效果
2020/06/23 Javascript
JS删除String里某个字符的方法
2021/01/06 Javascript
uni-app微信小程序登录授权的实现
2020/05/22 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
2020/12/05 Javascript
[02:16]卖萌的僵尸 DOTA2神话信使飞僵小宝来袭
2014/03/24 DOTA
使用 Python 实现简单的 switch/case 语句的方法
2018/09/17 Python
django创建超级用户过程解析
2019/09/18 Python
如何查看Django ORM执行的SQL语句的实现
2020/04/20 Python
HTML5和以前HTML4的区别整理
2013/10/20 HTML / CSS
HTML5学习笔记之html5与传统html区别
2016/01/06 HTML / CSS
医学专业毕业生推荐信
2013/11/14 职场文书
学校食堂采购员岗位职责
2013/12/05 职场文书
教师自荐信
2013/12/10 职场文书
教师师德师风自我剖析材料
2014/09/29 职场文书
党的群众路线对照检查材料思想汇报(学校)
2014/10/04 职场文书
幼儿园教学工作总结2015
2015/05/12 职场文书
MySQL创建高性能索引的全步骤
2021/05/02 MySQL
解决 redis 无法远程连接
2022/05/15 Redis