Question

以下是页面代码：

<html>
<body>

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

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

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

<script>
var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();

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

</body>
</html>

脚本中有一个附件。据我所知，每次调用add时，计数器必须再次设置为零，因此单击按钮时它不会增长。但实践表明，我的结论是错误的。请告诉我，为什么每次调用fumction add时都不会重置计数器？

Answer 1

根据您更新的代码，正确的行为是counter不能重置为零并增加一。

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

原因是因为您返回并分配给add的函数只是这一部分：

function () {return counter += 1;}

每次只调用add()来调用。原因是因为你有一个匿名函数声明counter并返回一个函数。该函数放入add并在闭包中捕获counter变量。

Answer 2

你需要把它变成一个单独的函数来实现真正的近距离，而不是你可以调用函数。

<body>

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

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

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

<script>
var add = function () {
    var counter = 0;
    var x = function () {return counter += 1;}
    return x();
};

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

这个js外壳如何工作？

2 个答案: