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 相关文章推荐
按给定几率进行随机抽取的js代码
Dec 28 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
Dec 27 Javascript
node.js中的fs.read方法使用说明
Dec 17 Javascript
jQuery Ajax页面局部加载方法汇总
Jun 02 Javascript
JavaScript中实现键值对应的字典与哈希表结构的示例
Jun 12 Javascript
JavaScript构建自己的对象示例
Nov 29 Javascript
AngularJS入门示例之Hello World详解
Jan 04 Javascript
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
Feb 15 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
Jan 21 Javascript
vue-router 源码之实现一个简单的 vue-router
Jul 02 Javascript
使用Node搭建reactSSR服务端渲染架构
Aug 30 Javascript
countup.js实现数字动态叠加效果
Oct 17 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
smarty+adodb+部分自定义类的php开发模式
2006/12/31 PHP
php带密码功能并下载远程文件保存本地指定目录 修改加强版
2010/05/16 PHP
一个PHP验证码类代码分享(已封装成类)
2011/07/17 PHP
利用PHP如何统计Nginx日志的User Agent数据
2019/03/06 PHP
js监听键盘事件示例代码
2013/07/26 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
2014/09/25 Javascript
JavaScript面向对象的实现方法小结
2015/04/14 Javascript
整理JavaScript创建对象的八种方法
2015/11/03 Javascript
Document.body.scrollTop的值总为零的快速解决办法
2016/06/09 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
2017/02/26 Javascript
详解Angular 开发环境搭建
2017/06/22 Javascript
浅谈jquery fullpage 插件增加头部和版权的方法
2018/03/20 jQuery
vue组件tabbar使用方法详解
2018/11/06 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
2019/03/19 Javascript
基于jQuery实现可编辑的表格
2019/12/11 jQuery
JS 事件机制完整示例分析
2020/01/15 Javascript
详解ES6 扩展运算符的使用与注意事项
2020/11/12 Javascript
VUE项目实现主题切换的多种方法
2020/11/26 Vue.js
Python中使用select模块实现非阻塞的IO
2015/02/03 Python
python获取mp3文件信息的方法
2015/06/15 Python
django在接受post请求时显示403forbidden实例解析
2018/01/25 Python
python 使用xlsxwriter循环向excel中插入数据和图片的操作
2021/01/01 Python
借助HTML5 Canvas API制作一个简单的猜字游戏
2016/03/25 HTML / CSS
伦敦所有西区剧院演出官方票务代理:Theatre Tickets Direct
2017/05/26 全球购物
HQhair美国/加拿大:英国化妆品、美容及美发产品商城
2019/04/15 全球购物
学前教育学生自荐信范文
2013/12/31 职场文书
幼儿园门卫岗位职责
2014/02/14 职场文书
2014高考励志标语
2014/06/05 职场文书
支部书记四风对照材料
2014/08/28 职场文书
环境工程专业毕业生求职信
2014/09/30 职场文书
2014年第四季度入党积极分子思想汇报(十八届四中全会)
2014/11/03 职场文书
人身损害赔偿协议书
2016/03/22 职场文书
MySql新手入门的基本操作汇总
2021/05/13 MySQL
SQL SERVER实现连接与合并查询
2022/02/24 SQL Server
Consul在linux环境的集群部署
2022/04/08 Servers
Python Flask实现进度条
2022/05/11 Python