JavaScript中的闭包(Closure)详细介绍

2023年6月10日下午7:52 • JavaScript

首先，我们需要了解什么是闭包(Closure)。闭包是指函数可以保存并使用函数外部变量的能力，这些变量在函数定义时是存在于函数外部的，当函数执行时可以访问这些变量。简单来说，闭包就是函数与其引用外部变量之间的关系。

如何创建一个闭包

我们可以通过以下示例来了解如何创建一个闭包：

function outer() {
  let a = 10;
  function inner() {
    console.log(a);
  }
  return inner;
}

const func = outer();
func(); // 输出10

在上面的代码中，我们定义了一个外层函数outer和一个内层函数inner。我们在outer函数中定义了一个局部变量a并将内部函数inner返回。当我们执行outer函数并将其返回值赋给变量func时，实际上返回的是inner函数。执行func函数时，它仍然能够访问outer函数中定义的变量a，这个能力就是闭包。

闭包的使用场景

闭包的应用非常广泛，例如：

1. 实现私有变量

我们可以使用闭包来实现私有变量的功能。在 JavaScript 中，没有像其他语言一样的私有变量机制，但我们可以通过闭包来模拟实现。以下是一个简单的示例：

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

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

在上面的代码中，我们创建了一个函数createCounter，该函数返回一个包含三个方法的对象，这三个方法可以分别用来增加、减少和获取一个计数器的值。我们将计数器的值定义在函数中，而不是暴露在全局作用域中，因此该变量变成了私有变量，只能通过返回的对象中的方法来访问和修改它。

2. 延迟执行

使用闭包，我们可以实现延迟执行的效果，即将函数的执行推迟到稍后的时间。以下是一个简单的示例：

function delay(fn, delay) {
  return function() {
    setTimeout(fn, delay);
  };
}

function sayHello() {
  console.log('Hello!');
}

const delayedHello = delay(sayHello, 1000);

console.log('Starting...');
delayedHello(); // 一秒后输出 "Hello!"
console.log('Ending...');

在上面的代码中，我们定义了一个函数delay，该函数接受两个参数：要延迟执行的函数和延迟时间。delay函数返回一个函数，该函数中执行的是一个setTimeout调用，用于延迟执行原始函数。我们可以将一个函数sayHello传递给delay函数，然后通过返回值来获取一个延迟执行的版本，最终可以在适当的时间调用它。这个机制可用于定时任务、动画及其他需要延迟执行逻辑的场景中。