Avatar

哨卫

前端工程师

Read Resume

JavaScript 闭包详解

理解 JavaScript 闭包的概念、原理和实际应用场景。

什么是闭包

闭包是指函数能够访问其外部作用域中变量的特性,即使外部函数已经执行完毕。

基本示例

function outerFunction(x) {
  // 外部函数的变量
  
  function innerFunction(y) {
    // 内部函数可以访问外部函数的变量
    return x + y;
  }
  
  return innerFunction;
}

const add5 = outerFunction(5);
console.log(add5(3)); // 输出 8

闭包的特点

1. 变量持久化

外部函数执行完后,其变量仍然被内部函数引用而不会被垃圾回收。

2. 数据私有化

可以创建私有变量,外部无法直接访问。

function createCounter() {
  let count = 0; // 私有变量
  
  return {
    increment: () => ++count,
    decrement: () => --count,
    getCount: () => count
  };
}

const counter = createCounter();
console.log(counter.getCount()); // 0
counter.increment();
console.log(counter.getCount()); // 1

实际应用场景

模块模式

const calculator = (function() {
  let result = 0;
  
  return {
    add: (x) => result += x,
    subtract: (x) => result -= x,
    getResult: () => result,
    reset: () => result = 0
  };
})();

事件处理

function attachListeners() {
  let clickCount = 0;
  
  document.getElementById('button').addEventListener('click', function() {
    clickCount++;
    console.log(`Clicked ${clickCount} times`);
  });
}

注意事项

  • 内存泄漏 - 闭包会阻止垃圾回收,注意及时清理
  • 性能影响 - 过度使用可能影响性能
  • 调试困难 - 作用域链复杂时不易调试
2025 — Built by 哨卫