JavaScript如何使用闭包

在本文中，我们将讨论JavaScript中闭包的工作原理。首先让我们了解什么是闭包以及与JavaScript中闭包相关的基本细节。

闭包是一个由函数和对其周围状态（词法环境）的引用组成的组合体。在JavaScript中，每当运行时创建一个函数时，就会创建一个闭包。换句话说，闭包只是一个稍微高级的名称，用于指代在其内部记住使用的外部事物的函数。

让我们看一些示例来了解闭包在JavaScript中的实际工作原理。

示例1：

在这个示例中，我们将声明一个闭包，它最终将访问外部函数的外部变量balance。
在内部函数中使用外部变量后，每当调用该外部函数时，该闭包将帮助我们从中减去100。

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <h2>JavaScript Closures</h2> 
    <button type="button" onclick="initaccount()"> 
          Click Me! 
        </button> 
    <p id="demo"></p> 
    <script> 
    function initaccount() { 
        var balance = 1000; 
  
        function currentbalance() { 
            balance = balance - 100; 
            alert(balance); 
        } 
        currentbalance(); 
    } 
    </script> 
</body> 
  
</html>

输出：

JavaScript如何使用闭包

解释： 在上面的示例中，currentbalance（）可以访问外部变量balance，因此每次调用initaccount（）方法时，balance都会减少100。

示例2： 闭包也可以嵌套，就像下面的示例一样。在这个示例中，outerfunction（）和innerfunction（）都可以访问counter变量，因此在调用Counter（）时，outerfunction（）和innerfunction（）都会增加counter的值。在这个上下文中，我们可以说闭包可以访问所有外部函数的作用域。

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <h2>JavaScript Closures</h2> 
    <button type="button" onclick=" Counter()"> 
        Click Me! 
    </button> 
    <p id="demo1"></p> 
    <p id="demo2"></p> 
    <script> 
    function Counter() { 
        var counter = 0; 
  
        function outerfunction() { 
            counter += 1; 
            document.getElementById("demo1").innerHTML 
                = "outercounter = " + counter + 
                "from outerfunction " ; 
  
            function innerfunction() { 
                counter += 1; 
                document.getElementById("demo2").innerHTML 
                 = " innercounter = " + counter +  
                   "from innerfunction "; 
            }; 
            innerfunction(); 
        }; 
        outerfunction(); 
    }; 
    </script> 
</body> 
  
</html>

输出：

JavaScript如何使用闭包