通俗理解闭包

最新推荐文章于 2025-08-19 17:32:45 发布

yuren_xia

最新推荐文章于 2025-08-19 17:32:45 发布

阅读量1k

点赞数 21

CC 4.0 BY-SA版权

分类专栏：前端技术文章标签： javascript

本文链接：https://blog.csdn.net/yuren_xia/article/details/145190664

前端技术专栏收录该内容

21 篇文章

订阅专栏

JavaScript在ES6之前并没有类的概念，但通过原型链和闭包，开发者可以实现类似继承和封装的功能（原型链实现继承，闭包实现封装）。ES6引入了类语法，但闭包仍然是实现私有数据封装的重要手段之一。另外，使用闭包还可用于保存上下文信息等场景。

一、定义

从函数角度
- 闭包是指有权访问另一个函数作用域中的变量的函数。即使外部函数已经返回，闭包仍然可以访问外部函数内部的变量。
- 例如：
```
function outerFunction() {
  let outerVariable = 'I am from outer function';
  function innerFunction() {
    console.log(outerVariable);
  }
  return innerFunction;
}
const closure = outerFunction();
closure();// 输出 'I am from outer function'
```
- 在这个例子中，innerFunction就是一个闭包，它可以访问outerFunction中的outerVariable。
从作用域链角度
- 闭包的形成是因为JavaScript中的函数是一等公民，可以作为参数传递、作为值返回，并且函数内部可以定义函数。当内部函数引用了外部函数的变量时，就形成了一个作用域链，这个作用域链在函数执行完毕后依然存在（只要闭包还在引用这些变量），从而构成了闭包。

二、闭包的作用

数据隐藏和封装
- 可以将一些变量封装在闭包内部，只暴露必要的接口给外部。
- 比如：
```
function createCounter() {
  let count = 0;
  return function () {
    count++;
    console.log(count);
  };
}
const counter = createCounter();
counter();// 输出 1
counter();// 输出 2
```
- 这里的count变量被封装在createCounter函数内部，通过闭包的方式实现了数据的隐藏和封装。
实现回调函数和高阶函数
- 在JavaScript中，很多异步操作（如定时器、事件处理等）都需要使用回调函数。闭包可以方便地在这些场景中使用。
- 例如：
```
function doSomethingAsync(callback) {
  setTimeout(function () {
    callback('Async operation completed');
  }, 1000);
}
doSomethingAsync(function (result) {
  console.log(result);
});
```
- 这里的匿名函数就是一个闭包，它可以访问外部函数的参数等信息。

三、闭包的注意事项

内存泄漏风险
- 如果闭包持续引用外部函数的变量，而这些变量不再需要时，可能会导致内存泄漏。因为JavaScript的垃圾回收机制无法回收这些被闭包引用的变量。
- 例如，在一些老旧的浏览器中，如果在循环中创建闭包并且不正确地管理引用，就容易出现内存泄漏问题。
性能影响
- 过度使用闭包可能会对性能产生一定的影响，因为闭包会占用额外的内存空间来保存作用域链等信息。

四、闭包的应用场景
JavaScript中闭包的应用场景主要包括：

数据私有化：通过闭包可以创建私有变量，只在闭包内部访问，而不暴露给全局作用域。例如，使用闭包实现计数器功能，外部无法直接访问和修改计数器的内部状态。
模块化：闭包可以用于创建模块，封装公共和私有变量，避免全局作用域的污染。例如，使用立即执行函数表达式（IIFE）创建模块，内部定义私有变量和方法，只暴露必要的接口。
函数柯里化：通过闭包，可以将一个多参数的函数转换成一系列单参数的函数。例如，实现一个柯里化函数addCurried，可以逐步传递参数进行计算。
函数记忆：闭包可以用于实现函数记忆，避免重复计算。例如，创建一个memoize函数，缓存函数调用的结果，提高性能。
回调函数：在事件处理、异步编程和JavaScript框架中，闭包常用于回调函数，确保回调函数能够访问到定义时的变量。例如，在定时器或事件监听中使用闭包保存上下文信息。
模拟私有方法：闭包可以帮助实现私有方法，防止外部直接访问和修改内部状态。例如，创建一个对象，内部定义私有方法，只暴露公共方法。
迭代器：闭包可以用于实现迭代器，遍历集合或序列，并对其中的元素进行操作。
防抖和节流：闭包在实现防抖（debounce）和节流（throttle）等高阶函数时非常有用，控制函数的执行频率。

五、典型问题示例
在使用 for 循环为多个元素添加点击事件时，常见的问题是循环变量 i 的作用域问题。如果不小心处理，所有点击事件可能会引用同一个最终的 i 值，导致预期之外的行为。闭包可以有效地解决这个问题，确保每个点击事件都能正确地访问到循环时的当前 i 值。

问题示例

假设我们有一组按钮，想要为每个按钮添加点击事件，点击时显示按钮的索引：

<button>Button 0</button>
<button>Button 1</button>
<button>Button 2</button>
<!-- 更多按钮 -->

错误的实现方式：

const buttons = document.querySelectorAll('button');
for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', function() {
        console.log('Button index:', i);
    });
}

在上述代码中，当点击按钮时，i 的值已经是 buttons.length，因此所有按钮点击都会输出相同的值。

使用闭包解决

方法一：立即执行函数表达式 (IIFE)

通过创建一个立即执行的函数，将当前的 i 值传递给闭包内部：

const buttons = document.querySelectorAll('button');
for (var i = 0; i < buttons.length; i++) {
    (function(index) {
        buttons[index].addEventListener('click', function() {
            console.log('Button index:', index);
        });
    })(i);
}

在这个例子中，每次循环时，IIFE 都会创建一个新的作用域，并将当前的 i 值传递给 index，确保每个点击事件都能访问到正确的索引。

方法二：使用 `let` 关键字

ES6 引入的 let 关键字具有块级作用域，可以自动为每次循环创建一个新的作用域，从而避免闭包问题：

const buttons = document.querySelectorAll('button');
for (let i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', function() {
        console.log('Button index:', i);
    });
}

使用 let 声明的 i 在每次循环迭代中都有自己的块级作用域，因此每个点击事件都能正确地引用对应的 i 值。

方法三：使用 `forEach` 循环

forEach 方法本身为每个元素提供了一个独立的作用域，也可以避免闭包问题：

const buttons = document.querySelectorAll('button');
buttons.forEach(function(button, index) {
    button.addEventListener('click', function() {
        console.log('Button index:', index);
    });
});

或者使用箭头函数：

buttons.forEach((button, index) => {
    button.addEventListener('click', () => {
        console.log('Button index:', index);
    });
});

总结

闭包是解决 for 循环中变量作用域问题的有效手段。通过创建独立的函数作用域（如 IIFE），或者利用 ES6 的 let 关键字和 forEach 方法，可以确保每个点击事件都能正确地访问到预期的循环变量值。