js闭包问题-CSDN博客

本文链接：https://blog.csdn.net/zwh1zwh/article/details/151231278

闭包是 JavaScript 中一个非常强大且核心的概念，理解它对于编写高效、优雅的代码至关重要。

一、什么是闭包？

一个非常权威且清晰的定义是：

闭包是指那些能够访问自由变量的函数。

自由变量：指在函数中使用，但既不是函数的局部变量，也不是其参数的变量。换句话说，它是从外层作用域捕获的变量。

因此，从技术上讲，所有 JavaScript 函数都是闭包。因为它们在创建时就已经保存了作用域链，能够访问外层（包括全局）的作用域变量。

然而，在实践中，我们通常所说的“闭包”特指以下情况：

当一个内部函数从其外部函数被返回出去之后，它仍然保持着对原始外部作用域（包含其自由变量）的引用，即使外部函数已经执行完毕。这个内部函数与其所引用的自由变量的组合，就构成了一个闭包。

二、一个经典的例子

让我们用之前提到的计数器例子来具象化这个定义：

function createCounter() {
  let count = 0; // count 是内部函数 increment 的“自由变量”

  function increment() {
    count++; // increment 访问了外部作用域的自由变量 count
    console.log(count);
  }

  return increment; // 将内部函数返回出去
}

const myCounter = createCounter();
// createCounter() 的执行上下文已经结束...
myCounter(); // 输出: 1
myCounter(); // 输出: 2

在这个例子中：

increment是内部函数。
count是它的自由变量（既不是 increment的参数，也不是它的局部变量）。
createCounter()执行后，将 increment函数返回并赋值给 myCounter。
虽然 createCounter的执行上下文已经销毁，但 increment函数在其词法作用域链上保留了对 count变量的引用，导致 count无法被垃圾回收机制清除。
myCounter()每次执行时，操作的 count都是同一个存在于闭包中的变量。

这个持续存在的 increment函数和它所记住的 count变量的组合，就是我们通常所说的闭包。

三、闭包是如何产生的？（原理）

闭包的产生与 JavaScript 的以下两个特性密切相关：

词法作用域（静态作用域）：函数的作用域在函数定义时就已经确定了，而不是在函数调用时。increment在 createCounter内部被定义，所以它天生就能访问 createCounter的作用域。
函数是第一等公民：函数可以像变量一样被赋值、作为参数传递、作为返回值返回。这使得内部函数可以“逃离”其原始的作用域，被外部代码所持有。

当函数被返回、传递或赋值时，它会携带一个隐藏的属性 [[Environment]]（或称为作用域链的引用），这个属性指向了它被创建时的词法环境。这就是它能记住自由变量的原因。

四、闭包的主要用途

数据封装与私有变量：模拟其他语言中的“私有”属性。外部无法直接访问 count，只能通过暴露的 increment方法来操作它，实现了很好的封装性。

function createSecret(secret) {
  return {
    getSecret: () => secret,
    setSecret: (newSecret) => { secret = newSecret; }
  };
}
const mySecret = createSecret("My password is 123");
console.log(mySecret.getSecret()); // 可以读取
// mySecret.secret // 直接访问报错，是私有的

状态保持：就像计数器一样，让函数拥有一个在其多次调用间都存在的“私有状态”。这在事件处理、异步回调等场景中极其常见。

function debounce(fn, delay) {
  let timerId; // 状态：计时器ID
  return function(...args) {
    clearTimeout(timerId); // 访问闭包中的 timerId
    timerId = setTimeout(() => fn.apply(this, args), delay);
  };
}
const debouncedScrollHandler = debounce(handleScroll, 200);
window.addEventListener('scroll', debouncedScrollHandler);

模块化编程：在 ES6 之前，闭包是实现模块模式的主要方式。

const MyModule = (function() {
  let privateVar = 0;

  function privateMethod() {
    // ...
  }

  return {
    publicMethod: function() {
      privateVar++;
      privateMethod();
      console.log(privateVar);
    }
  };
})();

MyModule.publicMethod(); // 输出: 1
// 无法访问 MyModule.privateVar

五、注意事项与常见陷阱

内存泄漏：因为闭包会长期持有对外部变量的引用，所以这些变量不会被垃圾回收。如果闭包本身是全局变量（或者被长期持有），那么它引用的所有变量都会一直存在，占用内存。不需要的闭包应及时解除引用（如 myCounter = null）。

循环中的闭包（经典面试题）：

for (var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i); // 输出 5 个 5
  }, 100);
}

原因：setTimeout的回调函数是一个闭包，它捕获的是变量 i本身。循环结束后，i的值是 5，所有回调都访问这同一个 i。

解决方案：

使用 IIFE（立即执行函数表达式） 创建新的作用域来捕获每次循环时 i的值：

for (var i = 0; i < 5; i++) {
  (function(j) { // j 捕获了当前循环的 i 值
    setTimeout(function() {
      console.log(j); // 输出 0, 1, 2, 3, 4
    }, 100);
  })(i);
}

使用 let声明块级作用域变量（最佳实践）：

for (let i = 0; i < 5; i++) { // let 为每次循环创建一个新的块级作用域
  setTimeout(function() {
    console.log(i); // 输出 0, 1, 2, 3, 4
  }, 100);
}

总结

闭包不是一個神秘的魔法，而是 JavaScript 词法作用域和函数是一等公民这两个特性自然结合的必然结果。

它的核心价值在于：让函数拥有“记忆”，能够访问和操作其定义时的词法环境，从而实现状态保持、数据封装和模块化。

理解并善用闭包，是你迈向 JavaScript 中级甚至高级开发者的关键一步。