js中的闭包

最新推荐文章于 2025-11-01 01:14:35 发布
转载 最新推荐文章于 2025-11-01 01:14:35 发布 · 7w 阅读 · 292
文章标签：

#JavaScript

闭包是JS的重要特性，允许函数访问其外部作用域的变量，即使外部函数已执行完毕。本文通过实例讲解闭包的概念、作用及潜在的内存泄漏问题。

闭包是js的一个难点也是它的一个特色，是我们必须掌握的js高级特性，那么什么是闭包呢？它又有什么用呢？

我们都知道，js的作用域分两种，全局和局部，基于我们所熟悉的作用域链相关知识，我们知道在js作用域环境中访问变量的权利是由内向外的，内部作用域可以获得当前作用域下的变量并且可以获得当前包含当前作用域的外层作用域下的变量，反之则不能，也就是说在外层作用域下无法获取内层作用域下的变量，同样在不同的函数作用域中也是不能相互访问彼此变量的，那么我们想在一个函数内部也有限权访问另一个函数内部的变量该怎么办呢？闭包就是用来解决这一需求的，闭包的本质就是在一个函数内部创建另一个函数。
我们首先知道闭包有3个特性：
①函数嵌套函数
②函数内部可以引用函数外部的参数和变量
③参数和变量不会被垃圾回收机制回收
本文我们以闭包两种的主要形式来学习
在这里插入图片描述

在这段代码中，a()中的返回值是一个匿名函数，这个函数在a()作用域内部，所以它可以获取a()作用域下变量name的值，将这个值作为返回值赋给全局作用域下的变量b,实现了在全局变量下获取到局部变量中的变量的值

再来看一个闭包的经典例子
在这里插入图片描述

一般情况下，在函数fn执行完后，就应该连同它里面的变量一同被销毁，但是在这个例子中，匿名函数作为fn的返回值被赋值给了fn1，这时候相当于fn1=function(){var n = 0 … }，并且匿名函数内部引用着fn里的变量num，所以变量num无法被销毁，而变量n是每次被调用时新创建的，所以每次fn1执行完后它就把属于自己的变量连同自己一起销毁，于是乎最后就剩下孤零零的num，于是这里就产生了内存消耗的问题

再来看一个经典例子-定时器与闭包

写一个for循环，让它按顺序打印出当前循环次数
在这里插入图片描述

按照预期它应该依次输出1 2 3 4 5，而结果它输出了五次5，这是为什么呢？原来由于js是单线程的，所以在执行for循环的时候定时器setTimeout被安排到任务队列中排队等待执行，而在等待过程中for循环就已经在执行，等到setTimeout可以执行的时候，for循环已经结束，i的值也已经编程5，所以打印出来五个5，那么我们为了实现预期结果应该怎么改这段代码呢？（ps:如果把for循环里面的var变成let，也能实现预期结果）

在这里插入图片描述

引入闭包来保存变量i，将setTimeout放入立即执行函数中，将for循环中的循环值i作为参数传递，100毫秒后同时打印出1 2 3 4 5

那如果我们想实现每隔100毫秒分别依次输出数字，又该怎么改呢?

在这里插入图片描述

在这段代码中，相当于同时启动3个定时器，i*100是为4个定时器分别设置了不同的时间，同时启动，但是执行时间不同，每个定时器间隔都是100毫秒，实现了每隔100毫秒就执行一次打印的效果。

②闭包作为参数传递

在这里插入图片描述

在这段代码中，函数fn1作为参数传入立即执行函数中，在执行到fn2(30)的时候，30作为参数传入fn1中，这时候if(x>num)中的num取的并不是立即执行函数中的num，而是取创建函数的作用域中的num这里函数创建的作用域是全局作用域下，所以num取的是全局作用域中的值15，即30>15，打印30

最后总结一下闭包的好处与坏处
好处

①保护函数内的变量安全 ，实现封装，防止变量流入其他环境发生命名冲突

②在内存中维持一个变量，可以做缓存（但使用多了同时也是一项缺点，消耗内存）

③匿名自执行函数可以减少内存消耗

坏处

①其中一点上面已经有体现了，就是被引用的私有变量不能被销毁，增大了内存消耗，造成内存泄漏，解决方法是可以在使用完变量后手动为它赋值为null；

②其次由于闭包涉及跨域访问，所以会导致性能损失，我们可以通过把跨作用域变量存储在局部变量中，然后直接访问局部变量，来减轻对执行速度的影响

Js中的闭包
天马3798
01-02 814
闭包是一个比较抽象的概念,尤其是对js新手来说.书上的解释实在是比较晦涩,对我来说也是一样. 　　但是他也是js能力提升中无法绕过的一环,几乎每次面试必问的问题,因为在回答的时候.你的答案的深度,对术语的理解以及js内部解释器的运作方式的描述,都是可以看出你js实际水平的.即使你没答对,也能让考官对你的水平有个评估.那么我先来说说我对js中的闭包的理解. 　闭包是很多语言都具备的特性,
前端开发：JS中闭包的使用详解
全沾软贱开发攻城狮
08-21 1万+
在前端开发的时候，JavaScript的变量可以是局部变量或全局变量，当需要使用局部私有变量的时候，就涉及到闭包相关的内容。关于JS中闭包的使用是一个非常重要的知识点，也是JS中的一个难点，不管是在实际开发过程中的时候，尤其是在高级应用中必须依靠闭包来操作实现；还是在求职面试的时候，都是必备知识点。那么本篇博文就来分享一下关于JS中闭包的相关知识，记录一下，方便查阅使用。
Javascript基础系列之闭包
dreamer_dly的博客
07-03 989
在上面的代码示例中，`a`函数定义了一个名为`aa`的变量和一个名为`b`的函数，`b`函数引用了`aa`变量，因此JavaScript引擎会保留`a`函数的作用域链，`b`函数可以访问`a`函数的执行上下文，`b`函数内用到了外部函数`a`的变量`aa`，在`a`函数调用结束后该函数执行上下文会销毁，但会保留一部分留在内存中供`b`函数使用，这就形成了闭包。这种函数嵌套和变量共享的方式就是闭包的核心概念。并且 `fun.Closure` 中的内容是 `a` 和 `b` 两个变量，并没有 `c`。
javascript 闭包
最新发布
onlymscn的博客
11-01 769
本文系统介绍了JavaScript中的闭包机制，从定义、原理到应用场景和技术细节。闭包是指函数能够记住并访问其定义时的作用域环境，即使在该作用域外执行。主要作用包括数据私有化、延长变量生命周期和实现高阶函数功能。文章详细解析了闭包的基本示例、数据封装、循环中的常见问题及解决方案，并列举了防抖节流、模块化开发等高级应用场景。同时指出了内存泄漏、性能影响等注意事项，给出了调试技巧和最佳实践。通过多个经典案例和面试题，帮助开发者深入理解闭包的本质及其在JavaScript中的重要地位。
【JavaScript】闭包以及原理解析
m0_68324632的博客
01-18 1929
闭包是JavaScript中一个非常容易让人迷惑的知识点一个函数和对其周围状态（，词法环境）的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包（closure）；也就是说，闭包让你可以在一个内层函数中访问到其外层函数的作用域；在JavaScript中，每当创建一个函数，闭包就会在函数创建的同时被创建出来；
彻底理解js中的闭包
热门推荐
dovlie的博客
07-29 7万+
闭包是js的一个难点也是它的一个特色，是我们必须掌握的js高级特性，那么什么是闭包呢？它又有什么用呢？ 我们都知道，js的作用域分两种，全局和局部，基于我们所熟悉的作用域链相关知识，我们知道在js作用域环境中访问变量的权利是由内向外的，内部作用域可以获得当前作用域下的变量并且可以获得当前包含当前作用域的外层作用域下的变量，反之则不能，也就是说在外层作用域下无法获取内层作用域下的变量，同样在不同的...
JS闭包的理解
吴小迪的博客
05-14 6万+
闭包的简介： 闭包就是能够读取其他函数内部变量的函数。只有函数内部的子函数才能读取局部变量，在本质上，闭包是函数内部和函数外部连接起来的桥梁。 闭包的定义： 如果在一个内部函数里，对在外部作用域(但不是全局作用域)的变量进行引用，那么内部函数就被认为是闭包(closure)。 闭包的特点： 可以读取自身函数外部的变量(沿着作用域链寻找)先从自身开始查找，如果自身没有才会继续往上级查找，自身如果拥...
javascript中闭包概念与用法深入理解
01-19
本文实例分析了javascript中闭包概念与用法。分享给大家供大家参考，具体如下： 1.问题的引出，什么时候会遇到闭包？ 首先因为JS是没有块状作用域的，但是有函数作用域即函数作为了局部变量之间的界限，不同函数内的...
JavaScript中闭包之浅析解读(必看篇)
10-21
当函数计算出一个值之后，可以将结果保存在闭包中，当下次调用同一个函数时，可以直接返回之前计算好的结果。 6. 事件处理：在处理动态绑定事件时，常常使用闭包来保存事件处理器的状态。例如，在循环中为多个元素...
JavaScript中闭包的写法和作用详解
11-22
1、什么是闭包 闭包是有权访问另一个函数作用域的变量的函数。 简单的说，Javascript允许使用内部函数—即函数定义和函数表达式位于另一个函数的函数体内。而且，这些内部函数可以访问它们所在的外部函数中声明的...
JavaScript中闭包的详解
10-20
闭包在JavaScript中是一个至关重要的概念，它涉及到函数、作用域和变量的生命周期。闭包简单来说就是一个函数能够访问并操作其外部作用域中的变量，即使在其外部作用域已不再存在的情况下，这些变量仍然得以保留。这...
js闭包的理解
qq_40409143的博客
03-26 705
对js闭包的理解： 其实我对js闭包的理解在不同的阶段理解是不一样的 chrome浏览器断点调试理解闭包： 因为对于闭包有很多不同的理解，包括一些书籍(例如js高级程序设计)，这里直接以浏览器解析，以浏览器理解的闭包为准来分析闭包，如下图： 如上图所示，chrome浏览器理解闭包是foo，那么按浏览器的标准是如何定义闭包的，总结为三点： 在函数内部定义新函数 新函数访问外层函数的局部变量，即访问外层函数环境的活动对象属性 新函数执行，创建新的函数执行上下文，外层函数即为闭包 首先呢，我们必须搞清楚闭包这个
js中闭包的理解
zm_miner的博客
08-30 911
对于闭包二字, 我们常常听说, 可能更加知道面试的时候, 面试官必问知识点之一 在MDN 中, 对闭包是这样定义的 一个函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包（closure）。也就是说，闭包让你可以在一个内层函数中访问到其外层函数的作用域。在 JavaScript 中，每当创建一个函数，闭包就会在函数创建的同时被创建出来。 要想理解闭包, 必然需要理解js的变量作用域: 全局变量和局部变量 我们都知道, 在函数内部
让你分分钟理解 JavaScript 闭包
dkjtyhj3671的博客
12-21 352
闭包，是 Javascript 比较重要的一个概念，对于初学者来讲，闭包是一个特别抽象的概念，特别是 ECMAScript 规范给的定义，如果没有实战经验，很难从定义去理解它。因此，本文不会对闭包的概念进行大篇幅描述，直接上干货，让你分分钟理解闭包！ 闭包，一睹为快 在接触一个新技术的时候，我首先会做的一件事就是找它的 demo。对于我们来说，看代码比自然语言更能理解一个事物的本质。...
js中对闭包的理解
qq_45715615的博客
03-17 2516
闭包的解释一：就是上级作用域内变量的生命周期，因为被下级作用域内引用，而没有被释放。就导致上级作用域内的变量，等到下级作用域执行完以后才正常得到释放。 闭包的解释二：它是这样工作的，无论何时声明新函数并将其赋值给变量，都要存储函数定义和闭包。闭包包含在函数创建时作用域中的所有变量，它类似于背包。函数定义附带一个小背包，它的包中存储了函数定义创建时作用域中的所有变量。 需要记忆的知识： 记住闭包的方法是通过背包的类比。当一个函数被创建并传递或从另一个函数返回时，它会携带一个背包。背包中是函数声明时作用域
public protected private
qq_656236576的博客
10-20 392
public 修饰的变量和函数可以在类的内部和外部都可以访问 protected 修饰的变量和函数只可以在类的内部访问，如果该类派生出子类，那么在子类中该变量和函数也可以使用 private 修饰的变量和函数只可以在类的内部访问，在其派生的子类中不能访问。 ...
js中的闭包理解
weixin_43735593的博客
11-23 159
js中的闭包理解 什么是闭包？闭包是js中的一个特点也是一个知识难点，闭包的作用是什么？优劣势优势什么？ 我们知道在定义一个全局变量的时候，如果在不知道前面的代码的情况下，不小心定义了同一个变量名，则前面的代码运行结果会受到影响，为了避免这种影响，于是就有了闭包。 闭包可以解决全局变量污染的问题，特点是在一个函数中声明变量（此时的变量是局部变量，不影响全局变量），同时在该函数中再定义一些函数，闭包...
js的闭包的理解
qq_33866778的博客
08-04 492
一、闭包的概念闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。 那么什么是闭包呢？这个概念还是相对比较模糊的，好多地方介绍的比较高大上，看了不是很明白。官方”的解释是：闭包是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。相信很少有人能直接看懂这句话 好吧我用土一点的说法： 我觉得闭包就
js中闭包的常见例子
08-08
<think>首先，用户的问题是关于JavaScript闭包的常见示例和用法。我需要根据系统指令来构建回答。 系统指令关键点： - 所有行内数学表达式用 `$...$` 格式，但这里没有数学内容，所以可能不需要。 - 独立公式用 `$$...$$`，但用户问题不涉及数学，所以跳过。 - LaTeX语法正确：同样，不适用。 - 使用中文回答：整个回答要用中文。 - 生成相关问题：在回答结束后，添加相关问题部分。 - 回答中引用的段落末尾自然地添加引用标识，如 `[^1]`。引用来自提供的参考。 - 回答结构清晰，帮助用户逐步解决问题，保证真实可靠。 用户提供的引用： - [^1]: 关于闭包的实际应用：封装私有变量、延迟执行、保存状态。 - [^2]: 闭包的核心特点：记住词法作用域。 - [^3]: 常见闭包示例：函数作为返回值、作为实参传递、高阶函数与柯里化。 - [^4]: 闭包的影响和实例：定时器问题。 - [^5]: 另一个示例：事件处理中的闭包。 用户问题： "我想了解JavaScript中闭包的常见示例 请问JavaScript 闭包常用示例及用法" 我需要基于这些引用构建回答。参考是站内引用，我应该自然地融入回答中。 回答结构： 1. **介绍闭包**：简要解释闭包是什么，基于引用[^2]。 2. **常见示例**：详细描述常见示例，从引用[^3]和[^5]。 - 函数作为返回值（计数器示例）。 - 函数作为实参传递（setTimeout示例）。 - 事件处理（按钮点击示例）。 - 定时器问题（引用[^4]的for循环问题）。 3. **用法**：讨论闭包的用途，基于引用[^1]，如封装私有变量、延迟执行、保存状态。 4. **注意事项**：提到闭包可能的影响，如性能问题（引用[^4]）。 5. **结尾**：总结并添加相关问题。 确保回答清晰、逐步解释。使用中文。 在引用段落末尾添加引用标识，例如：在描述一个概念后加 `[^1]`。 生成相关问题： - 基于主题，如闭包的优缺点、如何避免内存泄漏、实际应用场景等。 大纲回答： - 开头：定义闭包。 - 主体：常见示例和用法。 - 示例1：计数器（函数返回）。 - 示例2：setTimeout。 - 示例3：事件处理。 - 示例4：定时器问题。 - 用法：封装、延迟、状态保存。 - 注意事项：性能影响。 - 结尾：总结。 - 相关问题：3-5个问题。 现在，整合引用： - 当提到封装私有变量时，引用[^1]。 - 当描述核心特点时，引用[^2]。 - 当给出示例时，引用[^3]、[^4]、[^5]。 最终输出格式： - 回答部分。 - 相关问题部分以 "§§相关问题§§" 开头。</think>### JavaScript 闭包常用示例及用法详解 在 JavaScript 中，闭包（Closure）是一个核心概念，它允许函数访问并记住其定义时的词法作用域（Lexical Scope），即使函数在其作用域外部执行。闭包的核心特点包括：函数能“捕获”外部变量，并保持对这些变量的引用，从而在函数执行时访问或修改它们[^2]。闭包在 JavaScript 中有广泛的实际应用，例如封装私有变量、实现延迟执行或保存状态。下面我将逐步解释闭包的常见示例和用法，帮助您深入理解。 #### 一、闭包的常见示例 闭包的常见应用场景可以通过具体代码示例来展示。这些示例基于实际开发中的高频用例，确保您能直观掌握闭包的运作机制。 1. **函数作为返回值（计数器示例）** 这是闭包最经典的用法之一，常用于创建私有变量或状态管理。例如，定义一个函数返回另一个函数，内部函数访问并修改外部函数的变量： ```javascript function createCounter() { let count = 0; // 私有变量，通过闭包访问 return function() { count++; console.log(count); }; } const counter = createCounter(); counter(); // 输出: 1 counter(); // 输出: 2 ``` 在这个示例中，`createCounter` 函数返回的匿名函数形成了一个闭包，它“记住”了 `count` 变量，每次调用都会递增并输出其值。这实现了数据的封装和状态保存[^3]。 2. **函数作为实参传递（延迟执行示例）** 闭包常用于异步操作，如 `setTimeout` 或事件处理，以保存函数执行时的上下文。例如，传递一个闭包作为回调函数： ```javascript function showMessage(msg, delay) { setTimeout(function() { console.log(msg); // 闭包捕获了 msg 参数 }, delay); } showMessage('Hello, World!', 2000); // 2秒后输出 "Hello, World!" ``` 这里，匿名函数作为 `setTimeout` 的回调，通过闭包访问了 `msg` 参数，即使 `showMessage` 函数已执行完毕。这展示了闭包如何实现延迟执行和上下文保存[^3]。 3. **事件处理（按钮点击示例）** 在 DOM 操作中，闭包常用于事件监听器，以绑定特定数据到事件回调。例如，为多个按钮添加点击事件： ```javascript function setupButtons() { for (let i = 0; i < 3; i++) { document.getElementById(`btn${i}`).addEventListener('click', function() { console.log(`Button ${i} clicked`); // 闭包捕获了循环变量 i }); } } setupButtons(); // 每个按钮点击时输出对应索引 ``` 使用 `let` 声明循环变量 `i`，确保每个闭包捕获独立的 `i` 值。如果使用 `var`，会导致所有按钮输出相同值（如 `Button 3 clicked`），这是因为 `var` 的作用域问题。闭包在这里帮助保存了事件触发时的状态[^5]。 4. **定时器中的常见问题（循环闭包示例）** 闭包在循环中可能引发意外行为，需特别注意作用域管理。例如，一个经典的定时器问题： ```javascript for (var i = 1; i <= 3; i++) { setTimeout(function() { console.log(i); // 输出: 4, 4, 4（而非预期的 1,2,3） }, 1000); } ``` 问题原因：`var i` 是全局作用域，所有闭包共享同一个 `i`（循环结束后 `i=4`）。解决方案是使用 `let` 或创建新作用域： ```javascript for (let i = 1; i <= 3; i++) { // 使用 let 创建块级作用域 setTimeout(function() { console.log(i); // 输出: 1, 2, 3 }, 1000); } ``` 这突显了闭包在异步代码中的陷阱，需合理控制变量作用域[^4]。 #### 二、闭包的常见用法 闭包不仅用于示例场景，还广泛应用于以下功能，提升代码模块化和可维护性[^1]： - **封装私有变量和方法**：闭包可以创建模块化组件，避免全局污染。例如，实现一个简单的“私有”计数器： ```javascript const counterModule = (function() { let privateCount = 0; return { increment: function() { privateCount++; }, getCount: function() { return privateCount; } }; })(); counterModule.increment(); console.log(counterModule.getCount()); // 输出: 1 ``` 这里，IIFE（立即执行函数）返回的对象方法通过闭包访问 `privateCount`，外部无法直接修改该变量[^1]。 - **延迟函数执行**：闭包保存参数和上下文，用于定时器或事件队列。例如，在 AJAX 回调中保持数据状态。 - **保存状态**：闭包使函数能“记住”先前操作，如实现状态机或缓存机制。例如，记忆化（Memoization）优化递归计算： ```javascript function memoize(fn) { const cache = {}; return function(...args) { const key = JSON.stringify(args); if (cache[key]) return cache[key]; const result = fn.apply(this, args); cache[key] = result; return result; }; } const factorial = memoize(n => n <= 1 ? 1 : n * factorial(n-1)); console.log(factorial(5)); // 计算并缓存结果 ``` #### 三、注意事项 尽管闭包功能强大，但需注意潜在问题： - **性能影响**：频繁创建闭包可能增加内存开销，因为每个闭包都捕获整个作用域链。在性能敏感场景（如高频事件），应避免不必要的闭包创建[^4]。 - **内存泄漏风险**：如果闭包引用 DOM 元素或其他大对象，可能导致垃圾回收器无法释放内存。解决方法是手动解除引用（如移除事件监听器）。 - **作用域管理**：确保正确使用 `let` 或 `const` 避免变量共享问题，如前述循环示例。 #### 总结 闭包是 JavaScript 的核心特性，通过示例（如计数器、事件处理和定时器）和用法（封装、延迟执行、状态保存），它实现了强大的模块化和异步处理能力。理解闭包的工作原理（词法作用域捕获）和注意事项（性能优化），能帮助您编写更健壮的代码。在实际开发中，闭包常用于框架（如 React Hooks）和库设计，提升代码复用性[^1][^2]。
评论 13
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值