尽管每次都声明新的 var，但 Javascript 函数计数器仍会累加答案

【问题标题】：Javascript function counter add up despite declaring new var every time尽管每次都声明新的 var，但 Javascript 函数计数器仍会累加
【发布时间】：2017-10-04 03:58:44
【问题描述】：

<!DOCTYPE html>
    <html>
    <body>

    <p>Counting with a local variable.</p>

    <button type="button" onclick="myFunction()">Count!</button>

    <p id="demo">0</p>
    <p id="try">try</p>

    <script>
    var add = (function () {
        var counter = 0;
        document.getElementById("try").innerHTML = counter;
        return function () {return counter += 1;}
    })();

    function myFunction(){
        document.getElementById("demo").innerHTML = add();
    }
    </script>

    </body>
</html>

我想问一个问题。页面上有一个按钮，当我点击时，有一个计数器加1。

但是 add() 函数会创建一个新的 var counter = 0;每次打电话

and document.getElementById("try").innerHTML = counter;总是 0

计数器现在加起来 1 --> 2 --> 3 --> 4 ....

我不明白为什么它不保持在 1，因为每次调用函数时计数器总是新的并且等于 0。谢谢！

【问题讨论】：

你可以试试全局计数器变量
不，我想了解这段代码。这是来自 w3schools 教程

标签： javascript function counter

【解决方案1】：

调用 add() 不会执行变量计数器 = 0; 行。

根据您的代码，该行仅执行一次（在声明 add 变量时）。

如果您使用断点进行测试，您应该会看到这一点。

您的 add 函数可以无限期地访问同一个 counter 变量，因为 counter 变量是在与 add 函数定义相同的范围内创建的 (function () {return counter += 1;})。

【讨论】：

为什么不呢？但 var 计数器 = 0;在 add() 函数内 var counter = 0;然后执行？谢谢！
var counter = 0 这一行实际上是在包含添加函数定义的匿名函数中。 counter 变量在执行 var add = (function () { line 时声明一次

【解决方案2】：

这是因为您使用的是IIFE。因此，您的 add 变量就是您从 IIFE 返回的内容。所以，现在你的var add 变成了

var add = function () {return counter += 1;}

由于closure，counter 保留了之前的值。

因此在您第一次点击时，counter 是 1，然后是 2，然后是 3，依此类推。

【讨论】：