在本教程中，您将借助示例了解 JavaScript 闭包。
    在了解闭包之前，您需要了解两个概念：

• 嵌套函数
• 返回函数

JavaScript 嵌套函数

在 JavaScript 中，一个函数也可以包含另一个函数。这称为嵌套函数。例如，

// nested function example

// outer function
function greet(name) {

    // inner function
    function displayName() {
        console.log('Hi' + ' ' + name);
    }

    // calling inner function
    displayName();
}

// calling outer function
greet('John'); // Hi John

在上面的程序中，greet() 函数包含 displayName() 函数。

返回函数

在 JavaScript 中，您还可以在函数中返回一个函数。例如，

function greet(name) {
    function displayName() {
        console.log('Hi' + ' ' + name);
    }

    // returning a function
    return displayName;
}

const g1 = greet('John');
console.log(g1); // returns the function definition
g1(); // calling the function

输出

function displayName() {
      console.log('Hi' + ' ' + name);
  }
Hi John

在上面的程序中，greet() 函数返回 displayName 函数定义。
    这里，返回的函数定义被分配给 g1 变量。使用 console.log(g1) 打印 g1 时，您将获得函数定义。
    为了调用存储在 g1 变量中的函数，我们使用带括号的 g1() 。

JavaScript 闭包

在 JavaScript 中，闭包提供了从内部函数内部对函数外部作用域的访问，即使在外部函数关闭之后也是如此。例如，

// javascript closure example

// outer function
function greet() {

    // variable defined outside the inner function
    let name = 'John';

    // inner function
    function displayName() {

        // accessing name variable
        return 'Hi' + ' ' + name;
      
    }

    return displayName;
}

const g1 = greet();
console.log(g1); // returns the function definition
console.log(g1()); // returns the value

输出

function displayName() {
      // accessing name variable
      return 'Hi' + ' ' + name;
  }
Hi John

在上面的例子中，当 greet() 函数被调用时，它返回 displayName 的函数定义。
    这里，g1 是对 displayName() 函数的引用。调用 g1() 时，它仍然可以访问 greet() 函数。
    当我们运行 console.log(g1) 时，它返回函数定义。
    闭包的概念也存在于 Python、Swift、Ruby 等其他编程语言中。
    让我们看另一个例子。

// closure example

function calculate(x) {
    function multiply(y) {
        return x * y;
    }
    return multiply;
}

const multiply3 = calculate(3);
const multiply4 = calculate(4);

console.log(multiply3); // returns calculate function definition
console.log(multiply3()); // NaN

console.log(multiply3(6)); // 18
console.log(multiply4(2)); // 8

在上面的程序中，calculate() 函数接受一个参数 x 并返回 multiply() 函数的函数定义。multiply() 函数接受一个参数 y 并返回 x * y。
    multiply3 和 multiply4 都是闭包。
    传递参数 x 调用 calculate() 函数。调用 multiply3(6) 和 multiply4(2) 时，multipy() 函数可以访问外层 calculate() 函数传递的 x 参数。

数据隐私

JavaScript 闭包有助于保护程序的数据隐私。例如，

let a = 0;
function sum() {
    function increaseSum() {

        // the value of a is increased by 1
        return a = a + 1;
    }
    return increaseSum;
}

const x = sum();
console.log(x()); // 1
console.log(x()); // 2
console.log(x()); // 3
a = a + 1;
console.log(a); // 4

在上面的例子中，sum() 函数返回 increaseSum() 函数的函数定义。
    a 变量在 increaseSum() 函数中增加。然而，a 变量的值也可以在函数外部更改。在这种情况下，a = a + 1; 更改函数外部变量的值。
    现在，如果希望仅在函数内部增加变量 a，可以使用闭包。例如，

function sum() {
    let a = 0;
    function increaseSum() {

        // the value of a is increased by 1
        return a = a + 1;
    }
    return increaseSum;
}

let x = sum();
let a = 5;
console.log(x()); // 1
console.log(x()); // 2
console.log(a); // 5

在上面的示例中，sum() 函数将 a 的值设置为 0，并返回 increaseSum() 函数。
    由于闭包，即使已经执行了 sum()，increaseSum() 仍然可以访问 a，并且可以在每次调用 x() 时向 a 添加 1。并且 a 变量是 sum() 函数的私有变量。这意味着 a 变量只能在 sum() 函数内部访问。
    即使声明并使用 a，它也不会影响 sum() 函数中的 a 变量。

上一教程 ：JS Date and Time                                          下一教程 ：JS this

参考文档

[1] Parewa Labs Pvt. Ltd. (2022, January 1). Getting Started With JavaScript, from Parewa Labs Pvt. Ltd: https://www.programiz.com/javascript/closure