闭包详解：概念、应用场景与销毁方法

原创于 2025-07-20 15:09:05 发布 · 574 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

闭包的概念

闭包是由捆绑起来（封闭的）的函数和函数周围状态（词法环境）的引用组合而成。换言之，闭包让函数能访问它的外部作用域。在 JavaScript 中，闭包会随着函数的创建而同时创建。

闭包的特点

函数嵌套：闭包通常发生在函数嵌套结构中
内部函数引用外部变量：内部函数引用了外部函数的局部变量
变量持久化：即使外部函数已经执行完毕，其变量仍然被内部函数保持引用

基本示例

function outer() {
  let count = 0; // 外部函数变量
  
  function inner() { // 内部函数（闭包）
    count++;
    console.log(count);
  }
  
  return inner;
}

const closureFn = outer(); // outer执行完毕，但count变量被inner保持引用
closureFn(); // 输出1
closureFn(); // 输出2
closureFn(); // 输出3

闭包的应用场景

1. 数据封装与私有变量

function createCounter() {
  let count = 0;
  
  return {
    increment: function() { count++; },
    decrement: function() { count--; },
    getCount: function() { return count; }
  };
}

const counter = createCounter();
counter.increment();
console.log(counter.getCount()); // 1
// 无法直接访问count变量，实现了私有化

2. 函数工厂

function createMultiplier(multiplier) {
  return function(x) {
    return x * multiplier;
  };
}

const double = createMultiplier(2);
const triple = createMultiplier(3);

console.log(double(5)); // 10
console.log(triple(5)); // 15

3. 模块模式

const calculator = (function() {
  let memory = 0;
  
  return {
    add: function(a, b) {
      memory = a + b;
      return memory;
    },
    subtract: function(a, b) {
      memory = a - b;
      return memory;
    },
    getMemory: function() {
      return memory;
    },
    clearMemory: function() {
      memory = 0;
    }
  };
})();

calculator.add(10, 5); // 15
console.log(calculator.getMemory()); // 15

4. 事件处理和回调

function setupButtons() {
  const buttons = document.querySelectorAll('button');
  
  for (let i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', function() {
      console.log(`Button ${i} clicked`);
    });
  }
}
// 每个按钮点击时都能记住自己的索引

5. 防抖和节流函数

// 防抖函数
function debounce(fn, delay) {
  let timer = null;
  
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, arguments);
    }, delay);
  };
}

// 使用
window.addEventListener('resize', debounce(function() {
  console.log('窗口大小改变了');
}, 300));

如何销毁闭包

闭包会导致外部函数的变量无法被垃圾回收，如果不当使用可能导致内存泄漏。以下是销毁闭包的方法：

1. 显式解除引用

let closureFn = (function() {
  let data = "敏感数据";
  
  return function() {
    console.log(data);
  };
})();

// 使用闭包
closureFn();

// 不再需要时解除引用
closureFn = null;

2. 使用IIFE（立即调用函数表达式）

(function() {
  let privateData = "临时数据";
  
  // 临时使用闭包
  setTimeout(function() {
    console.log(privateData);
  }, 1000);
})();
// 函数执行完毕后，如果没有持续引用，闭包会被自动回收

3. 手动清理闭包保持的变量

function createClosure() {
  let largeData = new Array(1000000).fill("大数据");
  let resource = allocateResource();
  
  return {
    useData: function() {
      console.log(largeData.length);
    },
    cleanup: function() {
      largeData = null; // 手动释放大内存
      releaseResource(resource); // 释放其他资源
    }
  };
}

const closure = createClosure();
closure.useData();
// 不再需要时调用清理方法
closure.cleanup();

4. 避免不必要的闭包

// 不好的做法 - 创建不必要的闭包
function processElements(elements) {
  for (var i = 0; i < elements.length; i++) {
    elements[i].onclick = function() {
      console.log(i); // 总是输出elements.length
    };
  }
}

// 好的做法 - 避免闭包或正确使用
function processElements(elements) {
  for (let i = 0; i < elements.length; i++) {
    elements[i].onclick = function() {
      console.log(i); // 输出正确的索引
    };
  }
  // 或者使用IIFE创建作用域
}