JavaScript 闭包：初学者指南

闭包是 JavaScript 中一个强大的重要功能，许多初学者都对此感到困惑。它们负责 JavaScript 的几个最有用的功能，例如跨函数调用存储状态和创建私有变量。本博客试图通过将闭包分解为简单的语言并通过实际示例讨论其重要性来解释闭包。

？什么是闭包？

当一个函数从 JavaScript 中的另一个函数返回时，它会继承父函数的作用域。这意味着即使外部函数已完成执行，返回的函数也可以访问外部函数作用域中定义的变量。 闭包是函数及其封闭范围的组合。
这是一个更简单的定义：

• 闭包是一个函数，“记住”来自外部（封闭）函数范围的变量。
• 即使外部函数不再执行，内部函数也可以访问这些变量。

？闭包如何工作：一个例子

？没有闭包的示例

function outer(){
    let counter = 0
    function inner(){
        counter++
        console.log("counter = " + counter)
    }
    inner()
}
outer()
outer() 
/* Output:
counter = 1
counter = 1 */

？带闭包的示例

function outer(){
    let counter = 0
    function inner(){
        counter++
        console.log("counter = " + counter)
    }
    return inner
}
const fn = outer()
fn()
fn()
/* Output:
counter = 1
counter = 2 */

？闭包的主要特点

1. 持久内存：外部函数作用域中的变量在外部函数退出后很长时间内都会被“记住”。
2. 词法作用域：闭包基于函数的定义位置，而不是函数的执行位置。
3. 多个实例：每个闭包实例都存储自己的外部变量副本。

？多个实例的示例：

function counterFunction() {
    let count = 0;

    return function increment() {
        count++;
        return count;
    };
}

const counter1 = counterFunction();
const counter2 = counterFunction();

console.log("counter1 = " + counter1()); // Output: 1
console.log("counter1 = " + counter1()); // Output: 2
console.log("counter2 = " + counter2()); // Output: 1
console.log("counter1 = " + counter1()); // Output: 3
console.log("counter2 = " + counter2()); // Output: 2

这里，counter1 和 counter2 都有自己独立的计数变量。

？闭包的实际用途

1️⃣ 数据隐私： 闭包可以隐藏全局范围内的变量，因此它们仅在特定函数中可用。
？示例：

function secretInfo() {
    let secret = "I love JavaScript";
    return {
        getSecret: function() {
            return secret;
        },
        setSecret: function(newSecret) {
            secret = newSecret;
        }
    };
}

const secretObject = secretInfo();
console.log(secretObject.getSecret()); // Output: I love JavaScript
secretObject.setSecret("I love Python too!");
console.log(secretObject.getSecret()); // Output: I love Python too!
secretObject.setSecret("I love PHP too!");
console.log(secretObject.getSecret()); // Output: I love PHP too!
// Attempting to Access secret Directly will not work
console.log(secretObject.secret); // Output: undefined

✍️ 此代码如何展示数据隐私：

1. 全局作用域保护：变量secret不能直接从全局作用域或代码的任何其他部分访问。例如，如果您尝试 console.log(secretObject.secret)，它将返回 undefined。
2. 私有状态维护：闭包的变量secret是私有的，只能使用getSecret和setSecret方法读取或修改。
3. 受控访问：程序通过定义函数 getSecret 和 setSecret 来确保对 Secret 变量的有限访问。

2️⃣ 函数工厂： 函数工厂 是一个生成并返回新函数的函数。它使我们能够根据输入参数动态构建定制功能。
？示例：

function outer(){
    let counter = 0
    function inner(){
        counter++
        console.log("counter = " + counter)
    }
    inner()
}
outer()
outer() 
/* Output:
counter = 1
counter = 1 */

✍️ 此代码如何展示函数工厂：

1. 计算函数的工作原理就像一个工厂，根据输入（因子）生成专门的乘数函数（双倍、三倍）。
2. 每个功能都是唯一且独立的，但共享相同的核心逻辑。

3️⃣ 事件监听器： 闭包通常用于回调和事件监听器中以维护状态。
？示例：

function outer(){
    let counter = 0
    function inner(){
        counter++
        console.log("counter = " + counter)
    }
    return inner
}
const fn = outer()
fn()
fn()
/* Output:
counter = 1
counter = 2 */

✍️ 此代码如何展示闭包如何在事件侦听器中工作：

1. setupListener 函数创建一个闭包并在其中定义 clickCount 变量。
2. 事件监听器函数是一个回调，即使在 setupListener 方法执行完毕后也可以访问 clickCount。
3. 每次单击 ID 为“myButton”的按钮时，事件侦听器的回调都会递增 clickCount 并记录更新的值。

？结论

闭包是 JavaScript 中的一个基本思想，它允许开发人员构建更加模块化、高效和私有的代码。了解闭包使您能够编写动态函数、维护持久状态并实现数据封装。

作为初学者，花时间练习和尝试闭包。它们一开始可能看起来很困难，但通过实践示例和用法，您很快就会意识到它们在 JavaScript 编程中令人难以置信的力量和多功能性。

是否有任何现实生活中的类比或例子可以帮助您学习闭包？在下面的评论部分分享它们！
快乐编码！ ✨

以上是JavaScript 闭包：初学者指南的详细内容。更多信息请关注PHP中文网其他相关文章！