JavaScript 中闭包的奥秘！-js教程-PHP中文网

JavaScript 中闭包的奥秘！

Linda Hamilton

发布： 2024-11-27 01:50:14

原创

677 人浏览过

Mystery of Closures in 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

登录后复制