了解 JavaScript 闭包：变量、函数和作用域。

“Javascript 闭包是编程中的一个基本概念，它使函数能够访问和操作周围范围的变量。这种强大的技术可以实现数据封装、上下文保存和高效的内存管理。了解 Javascript 闭包对于开发健壮、可扩展和可维护的应用程序至关重要。在本文中，我们将研究这个概念的复杂性，探索变量、函数和范围，以掌握这个基本的 Javascript 概念。”
现在让我们看看 Javascript 中的闭包是什么。我想用三种方式来定义它：以简单和简洁的方式，以技术和详细的方式，以及以概念和类似的方式。

JavaScript 中什么是闭包？

“闭包是一个通道，通过该通道，另一个函数内的函数可以访问其自身的作用域及其外部函数的作用域，即使外部函数已返回。”。

“闭包也可以称为自包含函数，它维护对其周围词法作用域的引用，允许它访问和操作该作用域中的变量，即使该函数是在其原始上下文之外调用的。” .

“封闭就像一个有记忆的房间。当一个函数在另一个函数内部创建时，它会继承外部函数的作用域，就像房间继承其所在建筑物的特征一样。即使外部函数“关闭”（返回），内部函数也会记住外部作用域，从而允许它访问它的变量和函数”。这些定义突出了 JavaScript 闭包的不同方面。

为了支持定义或更好地理解主题，请考虑这样的闭包。想象一下，你有一个玩具盒容器，里面存放着所有你喜欢的玩具（玩具盒容器是我们的外部功能）。现在想象一下，玩具容器（外部功能）内有不同的玩具，例如汽车、洋娃娃和机器人等。 （这些是变量或任何其他函数）在这些玩具中，你有一个特殊的玩具（内部函数），它就是机器人。想象一下机器人通过通道拥有特殊的能力；即使玩具盒关闭时，它也可以玩或连接玩具盒内的所有其他玩具。想象一下那个特殊的通道或力量被关闭。我希望你明白这一点。让我们看一个代码示例来说明闭包。

<script>
        function details() {
            let surName = 'john';
            let lastName = 'mercy';
            function displayDetails() {
                return `hey ${surName} ${lastName} you have been registered`;
            }
            return displayDetails();
        }
        console.log(details());
    </script>

上面的代码中，displayDetails是函数或者闭包，或者更好，参考代码之前的插图。函数 displayDetails 正在使用闭包的力量来访问其范围之外的变量。事情是这样的。 displayDetails 在详细信息内部定义，它从外部范围访问 surName 和 lastName，并且即使在其范围之外也保留此访问权限。或者，以另一种方式，details 使用 surName 和 lastName 创建一个范围，displayDetails 访问此范围，displayDetail 使用 surName 和 lastName 返回一个字符串，details 返回 displayDetails 的结果。 console.log(详细信息()); 调用 displayDetails，访问外部范围变量。
这段代码的输出是嘿约翰怜悯，你已经注册了
结果如下图

现在您了解了闭包，让我们看看闭包在 Javascript 代码编写中的好处。

闭包中的变量

• 局部变量：在函数内声明的变量，只能在函数作用域内访问，在作用域外不可访问。
• 外部变量：外部函数中声明的变量可以被内部函数访问
• 全局变量：在所有函数外部声明的变量，可以从任何地方访问

闭包中的函数

• 内部函数：这些是在另一个可以访问外部作用域的函数中定义的函数
• 外部函数：该函数定义内部函数
的范围
• 函数表达式：定义为表达式的函数可以用作闭包

闭包中的范围

• 词法作用域：内部函数可以访问外部作用域。
• 动态作用域：作用域在运行时确定（未在 JavaScript 中使用）。

关闭有什么好处？

• 数据隐藏：保护数据免遭外部访问 让我们在下面的代码中查看展示此数据隐藏的代码示例

<script>
        function details() {
            let surName = 'john';
            let lastName = 'mercy';
            function displayDetails() {
                return `hey ${surName} ${lastName} you have been registered`;
            }
            return displayDetails();
        }
        console.log(details());
    </script>

在上面的代码中，函数 Person 接受两个参数：姓名和年龄，该函数创建一个新的 person 对象。在函数内部，声明了两个私有变量：privateName 和 privateAge。这些变量被分配传递给 person 函数的值（姓名和年龄）。这些变量是私有的，因为它们是用 let 声明的，并且不能在 Person 函数外部直接访问。返回对象也是通过三种方法创建的。这三种方法提供对私有变量的受控访问。因此，Person 函数创建了一个闭包，允许返回的对象访问私有变量。此外，私有变量对外部访问是隐藏的，从而提供数据保护。

• 封装：捆绑数据和方法
• 上下文保留：在异步调用中保留上下文。

闭包的常见用例

• 事件监听器或事件处理：保留事件上下文。这是一个简单的事件处理代码

<script>
        function details() {
            let surName = 'john';
            let lastName = 'mercy';
            function displayDetails() {
                return `hey ${surName} ${lastName} you have been registered`;
            }
            return displayDetails();
        }
        console.log(details());
    </script>

这是代码中发生的事情。我们定义一个函数 createClickCounter 返回另一个函数。在 createClickCounter 内部，我们声明了一个初始化为 0 的变量 clickCounter。
返回的函数增加 clickCounter 并更新 clickCounterElement 的文本内容。我们调用 createClickCounter() 创建一个闭包并将其分配给 counter 变量。我们使用 addEventListener 将计数器函数附加到按钮的单击事件。

counter 函数是一个闭包，因为它可以访问自己的作用域，可以访问外部函数的作用域 (createClickCounter())，在函数调用之间保留 clickCounter 的状态。

• 回调函数：在异步调用中保留上下文。
• 私有模块：创建私有变量和函数

结论

JavaScript 闭包使开发人员能够编写高效、模块化且安全的代码。通过掌握变量、函数和范围，开发人员可以充分利用闭包的潜力。闭包支持数据封装、状态保存和私有变量，从而提高代码质量和可维护性。有了这种基本的理解，开发人员就可以自信地应对复杂的 Javascript 挑战。有效使用闭包对于可扩展、健壮且高效的 JavaScript 应用程序至关重要。

以上是了解 JavaScript 闭包：变量、函数和作用域。的详细内容。更多信息请关注PHP中文网其他相关文章！