JavaScript 闭包：通俗理解与实际应用

你是否遇到过这样的情况：调试 JavaScript 代码时，函数明明执行完了，变量却依然存在？或者在循环中绑定事件，点击每个按钮结果都一样？又或者封装代码时，总担心变量污染全局空间？这些看似奇怪的现象，大多与闭包有关。

理解闭包对写出高质量代码非常重要。下面我们来详细讲解闭包是什么、它是如何工作的，以及在实际开发中怎么使用它。

什么是闭包

简单来说，闭包就是函数能够记住并访问它被创建时的环境，即使这个函数在原始环境之外执行。

更通俗地解释：当一个内部函数使用了外部函数的变量，即使外部函数执行完毕，这些变量也不会被清除，因为内部函数还在使用它们。这种情况就形成了闭包。

闭包的形成条件

闭包的形成需要三个条件：

函数内部定义了另一个函数
内部函数使用了外部函数的变量
内部函数被返回或在外部被使用

闭包的工作原理

JavaScript 使用词法作用域，这意味着函数的作用域在定义时就已经确定，而不是在执行时。

看一个简单例子：

function outer() {
  let outerVar = '我是外部变量';
  
  function inner() {
    console.log(outerVar);
  }
  
  return inner;
}

const myFunction = outer();
myFunction(); // 输出："我是外部变量"

在这个例子中，inner 函数被返回并赋值给 myFunction，此时 outer 函数已经执行完毕，但 inner 函数仍然能够访问 outer 函数中的 outerVar 变量。这就是闭包的作用。

闭包的实际应用

1. 创建私有变量

闭包可以帮助我们创建只能通过特定方法访问的变量，实现数据的封装和保护。

function createBankAccount() {
  let balance = 0; // 私有变量，外部无法直接访问
  
  return {
    deposit(amount) {
      balance += amount;
      console.log(`存入 ${amount}，当前余额：${balance}`);
    },
    withdraw(amount) {
      if (amount <= balance) {
        balance -= amount;
        console.log(`取出 ${amount}，当前余额：${balance}`);
      } else {
        console.log('余额不足');
      }
    },
    getBalance() {
      return balance;
    }
  };
}

const myAccount = createBankAccount();
myAccount.deposit(1000); // 存入 1000，当前余额：1000
myAccount.withdraw(500);  // 取出 500，当前余额：500
console.log(myAccount.balance); // undefined，无法直接访问
console.log(myAccount.getBalance()); // 500，通过方法访问

这种方式可以保护重要数据，只允许通过我们提供的方法进行操作。

2. 在循环中正确处理事件

一个常见的错误是在循环中绑定事件，结果所有事件处理函数都使用循环结束后的变量值。

错误做法：

// 这样写有问题
for (var i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log(i); // 每次都输出 3
  }, 100);
}

正确做法：

// 使用闭包修复
for (var i = 0; i < 3; i++) {
  (function(index) {
    setTimeout(function() {
      console.log(index); // 分别输出 0, 1, 2
    }, 100);
  })(i);
}

// 或者使用 let（现代写法）
for (let i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log(i); // 分别输出 0, 1, 2
  }, 100);
}

3. 函数工厂

闭包可以创建能够生成特定功能函数的工厂。

function createMultiplier(factor) {
  return function(number) {
    return number * factor;
  };
}

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

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

这种方式可以创建多个功能相似但参数不同的函数，提高代码复用性。

4. 缓存计算结果

闭包可以记住之前的计算结果，避免重复计算，提高程序性能。

function createCache() {
  const cache = {};
  
  return function(key, value) {
    if (value !== undefined) {
      // 设置缓存
      cache[key] = value;
      return value;
    } else {
      // 获取缓存
      return cache[key];
    }
  };
}

const myCache = createCache();

// 模拟耗时计算
function expensiveCalculation(n) {
  console.log(`计算 ${n} 的平方...`);
  return n * n;
}

function getSquare(n) {
  let result = myCache(n);
  if (!result) {
    result = expensiveCalculation(n);
    myCache(n, result);
  }
  return result;
}

console.log(getSquare(5)); // 计算并返回 25
console.log(getSquare(5)); // 直接返回缓存中的 25，不再计算

5. 防抖和节流

防抖和节流是处理频繁触发事件的有效方法，它们都依赖闭包实现。

防抖函数：

function debounce(func, wait) {
  let timeout;
  
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(this, args);
    }, wait);
  };
}

// 使用示例
const handleSearch = debounce(function(searchTerm) {
  console.log(`搜索: ${searchTerm}`);
  // 这里可以执行实际的搜索操作
}, 300);

// 在输入框变化时调用
// 用户快速输入时，只有在停止输入300毫秒后才会执行搜索

节流函数：

function throttle(func, limit) {
  let inThrottle;
  
  return function(...args) {
    if (!inThrottle) {
      func.apply(this, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}

// 使用示例
const handleScroll = throttle(function() {
  console.log('处理滚动事件');
  // 这里可以执行滚动时的操作
}, 200);

// 在滚动事件中调用
// 无论滚动多快，每200毫秒最多执行一次

闭包的注意事项

内存使用问题

由于闭包会保留外部函数的变量，这些变量不会被垃圾回收机制清除，可能增加内存使用。

function createHeavyObject() {
  const largeData = new Array(1000000).fill('一些数据'); // 大量数据
  
  return function() {
    console.log('数据长度:', largeData.length);
    // largeData 会一直存在，即使外部函数已执行完毕
  };
}

const heavyFunction = createHeavyObject();
// largeData 会一直占用内存，直到 heavyFunction 不再被使用

解决方法：当不再需要闭包时，及时释放引用。

// 不再需要时
heavyFunction = null;
// 这样 largeData 就可以被垃圾回收了

性能考虑

虽然现代JavaScript引擎对闭包做了很多优化，但过度使用闭包仍可能影响性能，特别是在性能敏感的场景中。

实际开发建议

合理使用：闭包是强大的工具，但不要滥用。只在需要时使用闭包。
注意内存：如果创建了大量闭包，要注意内存使用情况。
代码可读性：使用有意义的变量名和函数名，让闭包的用途更清晰。
模块化开发：在现代JavaScript开发中，可以使用ES6模块来实现类似闭包的数据封装，代码更清晰。

// 使用模块实现数据封装
let privateData = 0;

export function getData() {
  return privateData;
}

export function setData(value) {
  privateData = value;
}

总结

闭包是JavaScript中一个重要且强大的特性。理解闭包的工作原理和使用场景，能够帮助我们写出更安全、更高效、更易维护的代码。

闭包的核心是函数能够记住并访问它被创建时的环境。这个特性让我们能够实现数据私有化、创建函数工厂、优化性能等多种功能。

在实际开发中，我们要根据具体需求合理使用闭包，同时注意可能带来的内存和性能问题。掌握闭包的使用，是成为一名优秀JavaScript开发者的重要一步。

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/13128