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 31 Javascript
jquery 鼠标滑动显示详情应用示例
Jan 24 Javascript
node.js解决获取图片真实文件类型的问题
Dec 20 Javascript
jquery实现简单的表单验证
Nov 17 Javascript
详解javascript事件冒泡
Jan 09 Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
Jul 22 Javascript
[原创]jQuery常用的4种加载方式分析
Jul 25 Javascript
javascript使用 concat 方法对数组进行合并的方法
Sep 08 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
Sep 23 Javascript
js自定义瀑布流布局插件
May 16 Javascript
微信小程序云开发之模拟后台增删改查
May 16 Javascript
小程序云开发实现数据库异步操作同步化
May 18 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
无线电波是什么?它是怎样传输的?
2021/03/01 无线电
php页面跳转代码 输入网址跳转到你定义的页面
2013/03/28 PHP
Yii不依赖Model的表单生成器用法实例
2014/12/04 PHP
PHP中使用hidef扩展代替define提高性能
2015/04/09 PHP
PHP识别二维码的方法(php-zbarcode安装与使用)
2016/07/07 PHP
php获取当前月与上个月月初及月末时间戳的方法
2016/12/05 PHP
Yii框架的布局文件实例分析
2019/09/04 PHP
修复ie8&amp;chrome下window的resize事件多次执行
2011/10/20 Javascript
json对象转字符串如何实现
2012/12/02 Javascript
js获取当月最后一天实例代码
2013/11/19 Javascript
jquery 使用简明教程
2014/03/05 Javascript
Javascript检查图片大小不要让大图片撑破页面
2014/11/04 Javascript
JavaScript中用字面量创建对象介绍
2014/12/31 Javascript
JavaScript获取当前网页最后修改时间的方法
2015/04/03 Javascript
jQuery的animate函数实现图文切换动画效果
2015/05/03 Javascript
Javascript 5种方法实现过滤删除前后所有空格
2016/06/22 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
2017/01/23 Javascript
详解Javascript获取缓存和清除缓存API
2017/05/25 Javascript
vue 优化CDN加速的方法示例
2018/09/19 Javascript
JavaScript对JSON数组简单排序操作示例
2019/01/31 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
2019/02/21 Javascript
Node.JS用纯JavaScript生成图片或滑块式验证码功能
2019/09/12 Javascript
Python标准库os.path包、glob包使用实例
2014/11/25 Python
python实现多线程的两种方式
2016/05/22 Python
点球小游戏python脚本
2018/05/22 Python
Python实现猜年龄游戏代码实例
2020/03/25 Python
python利用opencv保存、播放视频
2020/11/02 Python
简单html5代码获取地理位置
2014/03/31 HTML / CSS
说出你对remoting 和webservice的理解和应用
2014/06/08 面试题
Java语言的优势
2015/01/10 面试题
丑小鸭教学反思
2014/02/03 职场文书
社区国庆节活动方案
2014/02/05 职场文书
公司行政助理岗位职责
2015/04/11 职场文书
老人节主持词
2015/07/04 职场文书
2019优秀干部竞聘演讲稿范文!
2019/07/02 职场文书
MySQL 自定义变量的概念及特点
2021/05/13 MySQL