JavaScript闭包的概念和用途解析

作者：andy0012023.09.27来源：Web前端之家浏览：1950评论:0

JavaScript 是一种常用的编程语言，广泛应用于前端开发，而其中的闭包（closure）是 JavaScript 中一个重要且常见的概念。闭包是函数和声明该函数的词法环境的组合，它使函数可以访问其词法作用域外的变量。本文将对 JavaScript 闭包的概念和用途进行解析。

什么是闭包？

闭包是指能够访问独立（自由）变量的函数。换句话说，闭包是一个函数及其在创建时捕获自由变量的环境。一个典型的闭包包含两个组成部分：

函数
该函数创建时所处的词法环境（即自由变量的引用）

通过使用闭包，函数可以继续访问创建它时的词法作用域，即使函数在其原始词法作用域之外执行。

闭包的形成过程

当一个函数被定义时，它会生成一个词法环境，其中存储着函数的局部变量以及它所能访问的外部变量。当函数执行结束后，通常会销毁其词法环境。但如果有其他的函数引用了该函数的变量，那么该变量就不会被销毁，这就形成了闭包。

下面是一个闭包的简单示例：

function outerFunction() {
  let outerVariable = 'I am outside!';

  function innerFunction() {
    console.log(outerVariable);
  }

  return innerFunction;
}

let closure = outerFunction();
closure(); // 输出: I am outside!

在上面的示例中，innerFunction 成为了闭包。它可以访问 outerFunction 内部的 outerVariable 变量，即使 outerFunction 已经执行完毕并且其词法环境应该被销毁。

闭包的用途

闭包在 JavaScript 中有许多重要的用途，以下是其中几个常见的用途：

1. 封装私有变量

通过使用闭包，可以创建具有私有变量的函数。这样一来，外部无法直接访问和修改这些变量，从而实现了封装的效果。

function createCounter() {
  let count = 0;

  function increment() {
    count++;
    console.log(count);
  }

  function decrement() {
    count--;
    console.log(count);
  }

  return {
    increment: increment,
    decrement: decrement
  };
}

let counter = createCounter();
counter.increment(); // 输出: 1
counter.increment(); // 输出: 2
counter.decrement(); // 输出: 1

在上述示例中，count 变量对外部是不可见的，只能通过 increment 和 decrement 方法来修改它。

2. 缓存数据

闭包可以用于缓存数据，避免重复计算。当某个函数被多次调用，并且每次调用都需进行复杂且耗时的计算时，可以通过闭包来缓存结果，避免重复计算。

function cacheFunction() {
  let cache = {};

  return function(key) {
    if (cache[key]) {
      return cache[key];
    }

    let result = // 复杂且耗时的计算

    cache[key] = result;
    return result;
  }
}

let expensiveFunction = cacheFunction();
console.log(expensiveFunction('key1')); // 第一次计算，将结果存入缓存
console.log(expensiveFunction('key1')); // 直接从缓存获取结果，避免重复计算
console.log(expensiveFunction('key2')); // 第一次计算，将结果存入缓存
console.log(expensiveFunction('key2')); // 直接从缓存获取结果，避免重复计算

在上述示例中，通过闭包和缓存对象 cache，可以避免对同一个 key 进行重复计算。

3. 实现模块化

闭包可以用于创建模块化的代码结构。通过将函数和其相关的变量包裹在一个闭包中，可以防止变量泄漏到全局作用域，避免命名冲突。

let counterModule = (function() {
  let count = 0;

  function increment() {
    count++;
    console.log(count);
  }

  function decrement() {
    count--;
    console.log(count);
  }

  return {
    increment: increment,
    decrement: decrement
  };
})();

counterModule.increment(); // 输出: 1
counterModule.increment(); // 输出: 2
counterModule.decrement(); // 输出: 1

在上述示例中，使用立即执行函数创建了一个闭包，将内部的 count 变量和 increment、decrement 函数封装在闭包内部，避免了对全局作用域的污染。