JavaScript中闭包的详解_网络技术_宿州市腾雀网络科技有限公司

JavaScript中闭包的详解

发布时间 - 2026-01-11 00:28:24 点击率：次

闭包是什么

在 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');
}

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

# js # 闭包 # 详解JavaScript闭包问题 # 关于Javascript闭包与应用的详解 # 详解JavaScript作用域闭包 # 详解JavaScript匿名函数和闭包 # JavaScript闭包和回调详解 # JavaScript闭包详解 # 是一个 # 全局变量 # 形成了 # 可以使用 # 就会 # 就能 # 去找 # 不被 # 值为 # 让人 # 出了 # 很难 # 就有 # 可以说 # 可以用 # 不多 # 只需 # 设为 # 要把 # 看完

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：忍者组谈明年计划：新作肯定会让粉丝们满意

下一篇：基于云服务器ECS建站：如何选择合适的实例类型？

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：忍者组谈明年计划：新作肯定会让粉丝们满意

下一篇：基于云服务器ECS建站：如何选择合适的实例类型？