JS 闭包(1)

心安事随

发布于 2024-07-29 16:44:00

560

发布于 2024-07-29 16:44:00

文章被收录于专栏：前端大合集

前言

JavaScript 中的闭包是一个非常强大的概念，很多开发者在学习 JavaScript 时都会遇到这个问题。本篇文章将介绍 JavaScript 中的闭包，同时提供一些例子来帮助您更好地理解。

什么是闭包？

首先，我们需要明白闭包是什么。简单的说，闭包是指可以访问独立变量的函数。具体来说，当一个内部函数引用了其外部函数的变量时，就形成了一个闭包。

下面的代码示例将更好地说明这一点：

// 外部函数
function outerFunction() {
  const outerVariable = '123';
    
  // 内部函数
  function innerFunction() {
    console.log(outerVariable);
  }

  return innerFunction;
}

const myInnerFunction = outerFunction();
myInnerFunction(); // 输出：123

在上面的示例代码中，outerFunction 函数返回了 innerFunction 函数。这意味着 innerFunction 可以访问 outerFunction 中定义的变量。因此，当 myInnerFunction() 被调用时，它会输出 I am outside!。

闭包的优点

闭包的最大优点是它们可以帮助我们隐藏或封装数据。这使得我们可以编写很多高效和安全的代码。其中一个优点是，闭包可以“记住”其父级函数中的数据，即使该函数已经退出并且不再存在。

下面是一个例子，它使用闭包来实现私有变量：

function createCounter() {
  let count = 0;
  return function() {
    count++;
    console.log(count);
  }
}

const counterA = createCounter();
counterA(); // 输出：1
counterA(); // 输出：2

const counterB = createCounter();
counterB(); // 输出：1

在这个例子中，createCounter 函数返回一个函数，该函数可以递增计数器并输出值。由于 count 变量只在 createCounter 函数内部定义，因此外部代码无法直接访问它。这使得我们可以安全地保护数据，并确保对其进行处理的代码仅在闭包范围内。

闭包的缺点

虽然闭包非常有用，但它们也有一些缺点。其中，最大的问题是它们可能会浪费内存。JavaScript 中的垃圾收集器将不会回收闭包中未使用的变量。如果你创建了很多这样的闭包，那么就可能导致内存泄漏和性能问题。

下面是一个稍微复杂的例子，它演示了在 JavaScript 中使用闭包的一些缺点：

function createBigObject() {
  const bigObject = new Array(70000).fill('x').join('');
  return function() {
      console.log(bigObject);
  }
}

const myBigObjectFunction = createBigObject();
myBigObjectFunction();

在这个例子中，createBigObject 函数返回了一个包含大量数据的闭包。每次调用 myBigObjectFunction 都会输出这个巨大的字符串。由于 JavaScript 不会回收未使用的闭包变量，因此可能会导致内存泄漏和性能问题。