JavaScript闭包循环应用技巧

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《JavaScript闭包循环使用技巧》，聊聊，希望可以帮助到正在努力赚钱的你。

在JavaScript循环中使用闭包时，核心问题是闭包共享同一变量导致输出异常，解决方法有：1. 使用let或const声明循环变量，利用块级作用域为每次迭代创建独立变量绑定；2. 使用IIFE为每次迭代创建独立作用域并传入当前变量值；3. 使用数组的forEach等方法，利用其回调函数的独立参数作用域。这些方法确保闭包捕获的是每次迭代的当前值而非最终值，从而正确输出预期结果，其中使用let或const是现代JavaScript中最推荐的做法。

JavaScript闭包在循环中正确使用，核心在于确保每次循环迭代都捕获到当前迭代的变量值，而不是循环结束后变量的最终状态。这通常通过为每次迭代创建独立的作用域来实现，最常见且推荐的做法是使用let或const声明循环变量，或者在旧版JavaScript中使用立即执行函数表达式（IIFE）。

解决方案

在JavaScript循环中使用闭包时，最常见的“陷阱”是当你在循环内部创建函数（闭包）并引用循环变量时，这些闭包会共享同一个外部作用域中的变量。由于JavaScript的var声明存在变量提升和函数作用域的特性，当循环结束时，这些闭包引用的变量通常会是循环的最终值。

解决这个问题有几种行之有效的方法：

1. 使用let或const声明循环变量 (ES6+推荐) 这是现代JavaScript中最简洁、最推荐的做法。let和const引入了块级作用域。这意味着，当你在for循环的头部使用let声明循环变量时，每次循环迭代都会为该变量创建一个新的绑定。因此，每个闭包都会捕获到它所在迭代的独立变量值。

   for (let i = 0; i < 5; i++) {
       setTimeout(function() {
           console.log(i); // 每次都会输出正确的 0, 1, 2, 3, 4
       }, i * 100);
   }

2. 使用立即执行函数表达式 (IIFE) (传统方法) 在ES6之前，或者当你不得不使用var时，IIFE是创建独立作用域的常用手段。你可以在循环内部创建一个IIFE，并将循环变量作为参数传递给它。这样，IIFE内部的函数（闭包）就会捕获到IIFE参数的副本，而不是外部共享的循环变量。

   

   for (var i = 0; i < 5; i++) {
       (function(j) { // j 是当前 i 的一个副本
           setTimeout(function() {
               console.log(j); // 每次都会输出正确的 0, 1, 2, 3, 4
           }, j * 100);
       })(i); // 将当前的 i 值传递给 IIFE
   }

3. 使用数组的forEach方法 (适用于数组遍历) 如果你正在遍历一个数组，forEach方法的回调函数会为每个元素创建一个新的作用域。回调函数的参数（元素、索引）在每次迭代中都是独立的，因此闭包可以安全地引用它们。

   const items = [0, 1, 2, 3, 4];
   items.forEach(function(item, index) {
       setTimeout(function() {
           console.log(item); // 输出 0, 1, 2, 3, 4
       }, index * 100);
   });

为什么在循环中使用闭包会遇到问题？

这个问题，说实话，是很多JavaScript初学者甚至一些经验丰富的开发者都曾踩过的坑。核心在于JavaScript中var关键字的作用域规则和闭包的工作原理。当你使用var在一个for循环中声明一个变量时，这个变量的作用域是整个函数，而不是循环的每一次迭代。这意味着，整个循环过程中，i 实际上只有一个实例。

考虑这样一个场景：

for (var i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(i);
    }, i * 100);
}
// 预期：0, 1, 2, 3, 4
// 实际输出：5, 5, 5, 5, 5

这里发生了什么？当setTimeout的回调函数（这些就是闭包）最终执行时，for循环其实早就已经跑完了。此时，i 的值已经是5了（因为i++到5时循环条件才不满足）。所有的闭包都引用着同一个外部作用域中的i变量，所以它们在执行时都去取i的当前值，也就是最终的5。这就像是所有人都拿着同一张纸条，纸条上的数字在不断变化，当他们终于能看清纸条时，上面写着的已经是最后那个数字了。这确实有点反直觉，但理解了var的函数作用域特性后，就豁然开朗了。

let 和 const 如何解决循环中的闭包问题？

let和const是ES6（ECMAScript 2015）引入的两个新的变量声明关键字，它们彻底改变了JavaScript中作用域的行为，尤其是在循环中。它们引入了“块级作用域”的概念。

简单来说，当你在一个for循环的头部使用let声明变量时，JavaScript引擎会做一些特别的事情：它会为每次循环迭代创建一个新的变量i的绑定。这意味着，尽管看起来还是同一个i，但在每次迭代中，它实际上是一个“新”的i。

for (let i = 0; i < 5; i++) {
    // 这里的 i 在每次迭代中都是独立的
    setTimeout(function() {
        console.log(i); // 完美输出 0, 1, 2, 3, 4
    }, i * 100);
}

这种机制让闭包能够捕获到它们各自迭代中i的正确值。对我个人而言，let和const的引入简直是JavaScript开发体验的一次飞跃，它极大地简化了之前需要通过IIFE等“技巧”才能解决的闭包问题。代码变得更加直观和可读，减少了出错的可能性。可以说，这是现代JavaScript中处理循环闭包问题的标准且优雅的解决方案。

传统方法：IIFE（立即执行函数表达式）在循环闭包中的应用

在let和const成为主流之前，立即执行函数表达式（IIFE）是解决var在循环中闭包问题的“黄金标准”。IIFE的本质是创建一个函数并立即执行它。通过这种方式，我们可以为每次循环迭代“强制”创建一个新的作用域。

它的工作原理是这样的：

for (var i = 0; i < 5; i++) {
    // 定义并立即执行一个匿名函数
    (function(currentI) { // currentI 是一个参数，它会接收 i 的当前值
        setTimeout(function() {
            console.log(currentI); // 这里的闭包捕获的是 currentI，它是每次循环 i 的副本
        }, currentI * 100);
    })(i); // 将当前的 i 值作为参数传递给 IIFE
}

在这个例子中，每次循环迭代，我们都定义并执行了一个新的匿名函数。我们将当前的i值作为参数传递给这个IIFE，并在IIFE内部将其命名为currentI。因为currentI是IIFE的局部变量，每次IIFE执行时都会创建一个新的currentI，所以内部的setTimeout回调函数（闭包）就会捕获到各自独立的currentI值，而不是外部那个共享的、不断变化的i。

虽然IIFE完美解决了问题，但相比于let和const，它的语法看起来确实稍微复杂一些，也显得有些“技巧性”。不过，理解IIFE对于理解JavaScript的作用域和闭包机制是至关重要的，尤其是在阅读一些老旧代码库时，你仍然会频繁地遇到它。它体现了开发者在语言特性不足时，如何巧妙地利用现有机制来解决问题的智慧。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。