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 等。

让我们来看另一个例子。

// 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 都是闭包。

调用 calculate() 函数并传入参数 x。当调用 multiply3(6) 和 multiply4(2) 时，multipy() 函数可以访问外部 calculate() 函数传入的 x 参数。

数据隐私

JavaScript 闭包有助于程序的data privacy。例如，

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 变量。

注意：通常，闭包用于数据隐私。