JavaScript中的闭包

描述：
闭包是JavaScript中一个非常重要的概念，它指的是一个函数能够记住并访问其词法作用域，即使该函数在其词法作用域之外执行。简单来说，当一个函数内部定义了另一个函数，并将这个内部函数作为返回值或传递给其他函数时，就创建了一个闭包。这个内部函数持有对其外部函数作用域的引用，因此外部函数执行完毕后，其变量不会被垃圾回收机制清除，而是继续被内部函数引用。

解题过程/知识点讲解：

要理解闭包，我们需要循序渐进地分析它的产生条件和行为。

步骤1：理解词法作用域
JavaScript的作用域是词法作用域，意味着函数的作用域在函数定义时就已经确定，而不是在执行时。

let globalVar = '我是全局变量';

function outerFunction() {
  let outerVar = '我是外部函数的变量'; // 定义在outerFunction的作用域内

  function innerFunction() {
    console.log(outerVar); // innerFunction可以访问outerVar
    console.log(globalVar); // 当然也可以访问全局变量
  }

  innerFunction();
}

outerFunction(); // 输出: "我是外部函数的变量" 和 "我是全局变量"

在这个例子中，innerFunction 被定义在 outerFunction 内部，根据词法作用域的规则，innerFunction 可以访问 outerFunction 的变量 outerVar。这本身还不是闭包，只是作用域链的体现。

步骤2：创建真正的闭包
闭包的关键在于，内部函数在其外部函数执行完毕后，仍然存活并被调用。这通常通过将内部函数返回或传递给其他函数来实现。

function outerFunction() {
  let outerVar = '我是外部函数的变量，外部函数已执行完毕，但我还被记着！';

  function innerFunction() {
    console.log(outerVar);
  }

  return innerFunction; // 关键：返回内部函数本身，而不是调用它
}

// 执行outerFunction，它返回了innerFunction
const myClosure = outerFunction();

// 此时，outerFunction已经执行完毕。按照常理，其内部的outerVar应该被销毁。
// 但是，因为myClosure（即innerFunction）引用了outerVar，
// 所以outerVar不会被垃圾回收，它依然“活着”。
myClosure(); // 输出: "我是外部函数的变量，外部函数已执行完毕，但我还被记着！"

这就是一个最简单的闭包。变量 myClosure 持有了对 innerFunction 的引用，而 innerFunction 又持有对其词法作用域（即 outerFunction 的作用域）中变量 outerVar 的引用。因此，即使 outerFunction 的执行上下文已经弹出调用栈，但其变量对象（包含 outerVar）依然被保留在内存中，可供 myClosure 随时访问。

步骤3：闭包的常见应用场景
闭包非常强大，常用于创建私有变量和模块模式。

// 使用闭包创建计数器，保护计数变量不被随意修改
function createCounter() {
  let count = 0; // count是一个“私有”变量，外部无法直接访问

  return {
    increment: function() {
      count++;
      return count;
    },
    decrement: function() {
      count--;
      return count;
    },
    getValue: function() {
      return count;
    }
  };
}

const counter = createCounter();
console.log(counter.getValue()); // 0
console.log(counter.increment()); // 1
console.log(counter.increment()); // 2
console.log(counter.decrement()); // 1

// 尝试从外部直接修改count会失败，因为count不在这个作用域内
// console.log(count); // ReferenceError: count is not defined

在这个例子中，createCounter 函数返回了一个包含三个方法（都是闭包）的对象。这三个方法都共享对同一个词法作用域（即 createCounter 的作用域）的访问权限，特别是对变量 count 的访问。外部代码只能通过这三个公开的方法来操作 count，而无法直接修改它，这就实现了数据的封装和私有化。

步骤4：注意事项 - 循环与闭包
一个常见的陷阱是在循环中创建闭包。如果不小心处理，可能会导致意想不到的结果。

// 一个有问题的例子
for (var i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log(i); // 我们期望输出0,1,2，但实际输出3,3,3
  }, 100);
}

问题分析：

1. var 声明的 i 是函数作用域，它在整个for循环的父级作用域（通常是全局作用域）中是同一个变量。
2. 循环快速执行完毕，i 的值最终变为3。
3. setTimeout 的回调函数是闭包，它们记住了对同一个变量 i 的引用。
4. 100毫秒后，回调函数执行，此时它们去访问 i，得到的值都是3。

解决方案：
我们需要为每个回调函数创建一个新的作用域，来保存当次循环中 i 的值。

• 方案A：使用IIFE（立即执行函数表达式）创建新的作用域

  for (var i = 0; i < 3; i++) {
    (function(j) { // j是IIFE的形参，捕获当次循环的i值
      setTimeout(function() {
        console.log(j); // 输出0,1,2
      }, 100);
    })(i); // 将i作为实参传入IIFE
  }
  

  每次循环，IIFE都会创建一个新的作用域，并将当前的 i 值作为参数 j 传入。每个 setTimeout 的回调函数都是闭包，它们记住的是各自IIFE作用域中的 j，这个 j 的值在循环时就被固定下来了。

• 方案B（更佳）：使用let声明块级作用域变量

  for (let i = 0; i < 3; i++) {
    setTimeout(function() {
      console.log(i); // 输出0,1,2
    }, 100);
  }
  

  let 声明的变量是块级作用域。在for循环中，每次迭代都会创建一个新的块级作用域，并且该次迭代的变量 i 是这个新作用域的一个副本。因此，每个 setTimeout 的回调函数闭包记住的是各自迭代块中的 i，互不干扰。这是现代JavaScript中最推荐的做法。

总结：
闭包是JavaScript函数作用域和词法作用域的自然结果。它使得函数可以“记住”并访问其定义时所处的环境，即使该环境已经不再活跃。闭包是实现模块化、数据私有化和高阶函数等强大功能的基石，但使用时也需注意循环中可能产生的引用问题，通常可以通过IIFE或块级作用域变量（let/const）来解决。