JavaScript 闭包：初学者指南-js教程-PHP中文网

JavaScript 闭包：初学者指南

DDD

发布： 2025-01-15 12:29:43

原创

561 人浏览过

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

登录后复制

？闭包的主要特点

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

？多个实例的示例：

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

登录后复制

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

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

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

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

登录后复制

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

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

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 */

登录后复制

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