闭包：JavaScript 中的魔法盒子闭包：JavaScript 中的魔法盒子！闭包是 JavaScript 中一个

闭包：JavaScript 中的魔法盒子！

闭包是 JavaScript 中一个既神秘又强大的概念，它让函数可以“记住”自己的出生地（词法作用域），即使离开了这个环境，依然能访问其中的变量。今天我们就来谈谈闭包，这也是一个很常见的面试题！

什么是闭包？

闭包是指 函数能够访问其词法作用域中的变量，即使函数在其词法作用域之外执行。简单来说，闭包就是一个函数“记住”了自己定义时的环境。

举个例子：

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

const counter = outer();
counter(); // 输出：1
counter(); // 输出：2

inner 函数访问了 outer 函数中的 count 变量，即使 outer 已经执行完毕，count 仍然存在。这就是闭包！

闭包的使用场景

1. 数据封装与私有变量

闭包可以创建私有变量，避免全局变量污染，同时保护数据的完整性。

示例代码：

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

const counter = createCounter();
counter.increment();
console.log(counter.getCount()); // 输出：1

解决的问题：

避免全局变量污染。
实现数据的封装和保护。

2. 回调函数与事件处理

闭包可以用于处理回调函数和事件监听器，捕获外部变量并在回调执行时使用。

示例代码：

function associateObjWithEvent(obj, methodName) {
  return function (e) {
    e = e || window.event;
    return obj[methodName](e, this);
  };
}

const button = document.getElementById('myButton');
button.onclick = associateObjWithEvent(myObject, 'doOnClick');

解决的问题：

简化事件绑定逻辑。
支持动态添加/移除事件处理器。

3. 函数柯里化与延迟计算

闭包可以用于实现函数柯里化（Currying），将多参数函数转换为一系列单参数函数，支持延迟计算。

示例代码：

function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn.apply(this, args);
    } else {
      return function (...remainingArgs) {
        return curried.apply(this, args.concat(remainingArgs));
      };
    }
  };
}

const add = (a, b, c) => a + b + c;
const curriedAdd = curry(add);
console.log(curriedAdd(1)(2)(3)); // 输出：6

解决的问题：

避免重复调用具有相同参数的函数。
提高代码的复用性和灵活性。

4. 防抖与节流

闭包可以用于实现防抖（Debounce）和节流（Throttle），优化高频事件的性能。

示例代码：

function debounce(fn, delay) {
  let timer = null;
  return function () {
    if (timer) clearTimeout(timer);
    timer = setTimeout(fn, delay);
  };
}

window.addEventListener('resize', debounce(() => {
  console.log('窗口大小改变');
}, 300));

解决的问题：

减少高频事件的触发次数。
提升页面性能和用户体验。

5. 模块化编程

闭包可以用于实现模块化编程，封装变量和函数，避免全局命名冲突。

示例代码：

const myModule = (function () {
  let privateVar = '私有变量';
  function privateMethod() {
    console.log(privateVar);
  }
  return {
    publicMethod: function () {
      privateMethod();
    },
  };
})();

myModule.publicMethod(); // 输出：私有变量

解决的问题：

避免全局命名冲突。
提高代码的可维护性和安全性。

总结

闭包是 JavaScript 中一个强大的特性，广泛应用于数据封装、回调函数、函数柯里化、防抖节流、模块化编程等场景。它让函数能够“记住”自己的出生地，即使离开了这个环境，依然能访问其中的变量。