JavaScript中闭包的详解


Posted in Javascript onApril 01, 2017

闭包是什么

在 JavaScript 中,闭包是一个让人很难弄懂的概念。ECMAScript 中给闭包的定义是:闭包,指的是词法表示包括不被计算的变量的函数,也就是说,函数可以使用函数之外定义的变量。

是不是看完这个定义感觉更加懵逼了?别急,我们来分析一下。

  • 闭包是一个函数
  • 闭包可以使用在它外面定义的变量
  • 闭包存在定义该变量的作用域中

好像有点清晰了,但是使用在它外面定义的变量是什么意思,我们先来看看变量作用域。

变量作用域

变量可分为全局变量和局部变量。全局变量的作用域就是全局性的,在 js 的任何地方都可以使用全局变量。在函数中使用 var 关键字声明变量,这时的变量即是局部变量,它的作用域只在声明该变量的函数内,在函数外面是访问不到该变量的。

var func = function(){
  var a = 'linxin';
  console.log(a);     // linxin
}
func();
console.log(a);       // Uncaught ReferenceError: a is not defined

作用域相对比较简单,我们不多讲,来看看跟闭包关系比较大的变量生存周期。

变量生存周期

全局变量,生命周期是永久的。局部变量,当定义该变量的函数调用结束时,该变量就会被垃圾回收机制回收而销毁。再次调用该函数时又会重新定义了一个新变量。

var func = function(){
  var a = 'linxin';
  console.log(a);
}
func();

a 为局部变量,在 func 调用完之后,a 就会被销毁了。

var func = function(){
  var a = 'linxin';
  var func1 = function(){
    a += ' a';
    console.log(a);
  }
  return func1;
}
var func2 = func();
func2();          // linxin a
func2();          // linxin a a
func2();          // linxin a a a

可以看出,在第一次调用完 func2 之后,func 中的变量 a 变成 'linxin a',而没有被销毁。因为此时 func1 形成了一个闭包,导致了 a 的生命周期延续了。

这下子闭包就比较明朗了。

  • 闭包是一个函数,比如上面的 func1 函数
  • 闭包使用其他函数定义的变量,使其不被销毁。比如上面 func1 调用了变量 a
  • 闭包存在定义该变量的作用域中,变量 a 存在 func 的作用域中,那么 func1 也必然存在这个作用域中。

现在可以说,满足这三个条件的就是闭包了。

下面我们通过一个简单而又经典的例子来进一步熟悉闭包。

for (var i = 0; i < 4; i++) {
  setTimeout(function () {
    console.log(i)
  }, 0)
}

我们可能会简单的以为控制台会打印出 0 1 2 3,可事实却打印出了 4 4 4 4,这又是为什么呢?我们发现,setTimeout 函数时异步的,等到函数执行时,for循环已经结束了,此时的 i 的值为 4,所以 function() { console.log(i) } 去找变量 i,只能拿到 4。

我们想起上一个例子中,闭包使 a 变量的值被保存起来了,那么这里我们也可以用闭包把 0 1 2 3 保存起来。

for (var i = 0; i < 4; i++) {
  (function (i) {
    setTimeout(function () {
      console.log(i)
    }, 0)
  })(i)
}

当 i=0 时,把 0 作为参数传进匿名函数中,此时 function(i){} 此匿名函数中的 i 的值为 0,等到 setTimeout 执行时顺着外层去找 i,这时就能拿到 0。如此循环,就能拿到想要的 0 1 2 3。

内存管理

在闭包中调用局部变量,会导致这个局部变量无法及时被销毁,相当于全局变量一样会一直占用着内存。如果需要回收这些变量占用的内存,可以手动将变量设置为null。

然而在使用闭包的过程中,比较容易形成 JavaScript 对象和 DOM 对象的循环引用,就有可能造成内存泄露。这是因为浏览器的垃圾回收机制中,如果两个对象之间形成了循环引用,那么它们都无法被回收。

function func() {
  var test = document.getElementById('test');
  test.onclick = function () {
    console.log('hello world');
  }
}

在上面例子中,func 函数中用匿名函数创建了一个闭包。变量 test 是 JavaScript 对象,引用了 id 为 test 的 DOM 对象,DOM 对象的 onclick 属性又引用了闭包,而闭包又可以调用 test ,因而形成了循环引用,导致两个对象都无法被回收。要解决这个问题,只需要把循环引用中的变量设为 null 即可。

function func() {
  var test = document.getElementById('test');
  test.onclick = function () {
    console.log('hello world');
  }
  test = null;
}

如果在 func 函数中不使用匿名函数创建闭包,而是通过引用一个外部函数,也不会出现循环引用的问题。

function func() {
  var test = document.getElementById('test');
  test.onclick = funcTest;
}
function funcTest(){
  console.log('hello world');
}

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript中读取和保存文件实例
May 08 Javascript
编写高质量JavaScript代码的基本要点
Mar 02 Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
Mar 28 Javascript
快速使用Bootstrap搭建传送带
May 06 Javascript
浅谈AngularJs指令之scope属性详解
Oct 24 Javascript
bootstrap——bootstrapTable实现隐藏列的示例
Jan 14 Javascript
使用FileReader API创建Vue文件阅读器组件
Apr 03 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
May 06 Javascript
JavaScript HTML DOM元素 节点操作汇总
Jul 29 Javascript
JavaScript实现旋转木马轮播图
Mar 16 Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
May 10 Javascript
详解JavaScript中的链式调用
Nov 27 Javascript
基于JavaScript实现验证码功能
Apr 01 #Javascript
AngularJS1.X学习笔记2-数据绑定详解
Apr 01 #Javascript
Angularjs使用指令做表单校验的方法
Mar 31 #Javascript
JS正则获取HTML元素的方法
Mar 31 #Javascript
JS+CSS实现下拉刷新/上拉加载插件
Mar 31 #Javascript
ES6中Generator与异步操作实例分析
Mar 31 #Javascript
微信公众号菜单配置微信小程序实例详解
Mar 31 #Javascript
You might like
PHP读取汉字的点阵数据
2015/06/22 PHP
php通过smtp邮件验证登陆的方法
2016/05/11 PHP
Yii2中YiiBase自动加载类、引用文件方法分析(autoload)
2016/07/25 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
让你的博客飘雪花超出屏幕依然看得见
2013/01/04 Javascript
利用js实现遮罩以及弹出可移动登录窗口
2013/07/08 Javascript
jQuery实现伸展与合拢panel的方法
2015/04/30 Javascript
Javascript节点关系实例分析
2015/05/15 Javascript
jquery任意位置浮动固定层插件用法实例
2015/05/29 Javascript
完美解决js传递参数中加号和&amp;号自动改变的方法
2016/10/11 Javascript
详解微信小程序开发之下拉刷新 上拉加载
2016/11/24 Javascript
js移动焦点到最后位置的简单方法
2016/11/25 Javascript
JS使用正则表达式找出最长连续子串长度
2017/10/26 Javascript
JavaScript自执行函数和jQuery扩展方法详解
2017/10/27 jQuery
Angular实现类似博客评论的递归显示及获取回复评论的数据
2017/11/06 Javascript
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
2017/12/24 Javascript
解决Vue打包之后文件路径出错的问题
2018/03/06 Javascript
vue--点击当前增加class,其他删除class的方法
2018/09/15 Javascript
详解小程序云开发数据库
2019/05/20 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
2020/03/02 Javascript
[02:08:58]2014 DOTA2国际邀请赛中国区预选赛 Ne VS CIS
2014/05/22 DOTA
Python  pip安装lxml出错的问题解决办法
2017/02/10 Python
Python利用Beautiful Soup模块搜索内容详解
2017/03/29 Python
python利用标准库如何获取本地IP示例详解
2017/11/01 Python
安装python及pycharm的教程图解
2019/10/10 Python
使用pth文件添加Python环境变量方式
2020/05/26 Python
CSS3 实现飘动的云朵动画
2020/12/01 HTML / CSS
Fossil美国官网:Fossil手表、手袋、珠宝及配件
2017/02/01 全球购物
六道php面试题附答案
2014/06/05 面试题
linux面试题参考答案(10)
2016/10/26 面试题
高三生物教学反思
2014/01/25 职场文书
教师考察材料范文
2014/06/03 职场文书
助人为乐好少年事迹材料
2014/08/18 职场文书
复制别人的成功真的会成功吗?
2019/10/17 职场文书
Nginx搭建rtmp直播服务器实现代码
2021/03/31 Servers
解析高可用Redis服务架构分析与搭建方案
2021/06/20 Redis