JavaScript 中闭包的奥秘！

乍一看，闭包可能看起来是一个复杂的概念，但不用担心它们比看起来简单得多！让我们消除困惑并解决一些关于闭包的常见误解。

关于闭包的常见误解

❌ 闭包是可以访问其周围范围的特殊函数。
不正确

• 闭包与函数不同。
• 在 JavaScript 中，每个函数本质上都可以访问其定义的作用域。这就是函数的工作原理！

❌ 闭包需要嵌套函数。
又错了

• 嵌套函数与创建闭包无关。
• 每当创建一个函数时，它都会自动与其周围的作用域形成一个闭包，不需要嵌套。

现实是什么❓

闭包并不是什么神奇或独特的功能。相反，它们只是函数和创建该函数的作用域中的变量的组合。每个函数都与此上下文捆绑在一起 - 将其视为对其来源的记忆。

这是 MDN 批准的定义：

闭包是一个函数与其周围状态的引用捆绑在一起的组合。

用简单的英语来说，闭包可以让你的函数“记住”创建它的地方的变量，即使它是在其他地方执行的。

让我们看看闭包的实际应用??‍?

这是一个有趣的小例子：

function createCounter() {
    let count = 0; // This is the surrounding state

    return function() { // The inner function
        count++; 
        return count;
    };
}

const counter = createCounter(); // Create a counter instance
console.log(counter()); // Output: 1
console.log(counter()); // Output: 2
console.log(counter()); // Output: 3

这里发生了什么？ ？
当调用 createCounter 时，会在其作用域内创建一个变量 count。
即使 createCounter 已经完成运行，返回的函数也会记住 count。
每次调用计数器时，由于闭包，它都可以访问和更新计数。

为什么闭包很重要？ ？

闭包不仅仅是一个优秀面试的理论概念——它们非常有用！以下是一些现实世界的场景：

1. 数据隐私

闭包可以使变量保持私有并且无法从外界访问。

function secretMessage() {
    let message = "This is a secret!";
    return function() {
        return message; // Only this function can access the variable
    };
}

const getMessage = secretMessage();
console.log(getMessage()); // Output: "This is a secret!"
console.log(message); // Error: message is not defined

2. 事件处理程序

当您想要“记住”某些状态时，闭包对于事件侦听器来说非常方便。

function greetUser(username) {
    return function() {
        console.log(`Hello, ${username}!`);
    };
}

const greetJohn = greetUser("John");
document.getElementById("myButton").addEventListener("click", greetJohn);
// Even after greetUser is done, greetJohn remembers "John"

3. 部分申请

闭包让您可以预先设置函数的参数。

function multiply(a) {
    return function(b) {
        return a * b; // "a" is remembered
    };
}

const double = multiply(2);
console.log(double(5)); // Output: 10
console.log(double(10)); // Output: 20

等等，关闭完美吗❓

并非总是如此！如果您不小心，闭包可能会因保留对变量的引用时间超过必要的时间而导致内存泄漏。例如，当在循环内部使用闭包时，很容易产生意想不到的行为：

function createCounter() {
    let count = 0; // This is the surrounding state

    return function() { // The inner function
        count++; 
        return count;
    };
}

const counter = createCounter(); // Create a counter instance
console.log(counter()); // Output: 1
console.log(counter()); // Output: 2
console.log(counter()); // Output: 3

要解决此问题，您可以使用 let （块作用域）或 IIFE：

function secretMessage() {
    let message = "This is a secret!";
    return function() {
        return message; // Only this function can access the variable
    };
}

const getMessage = secretMessage();
console.log(getMessage()); // Output: "This is a secret!"
console.log(message); // Error: message is not defined

包起来？？？

闭包在 JavaScript 中无处不在。无论您是否意识到，您已经在使用它们了！它们是让 JavaScript 变得强大且灵活的秘密武器。

以下是要记住的事情： ?

• 闭包不是函数；它们是一个函数，它记住的变量。
• JavaScript 中的每个函数都有一个闭包。
• 使用闭包进行封装、事件处理、部分应用等。

感谢您的阅读。 ？
快乐编码！ ??‍?✨

以上是JavaScript 中闭包的奥秘！的详细内容。更多信息请关注PHP中文网其他相关文章！