Javascript - 自调用和普通函数调用有什么区别？ [复制]答案

【问题标题】：Javascript - What is the difference between self-invoking and the normal function invocation? [duplicate]Javascript - 自调用和普通函数调用有什么区别？ [复制]
【发布时间】：2017-12-23 08:14:28
【问题描述】：

我对在 Javascript 中使用闭包和自我撤销感到困惑。当我运行此代码时，每次单击按钮时，计数器都会增加 1。分配给“添加”的函数似乎是自调用函数。

<!DOCTYPE html>
<html>
<body>

<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>

但是，当我像下面的代码那样调用函数时，计数器值始终为 1。

<!DOCTYPE html>
<html>
<body>

<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(){
    var temp = add();
    document.getElementById("demo").innerHTML = temp();
}
</script>

</body>
</html>

谁能告诉我这两个示例之间的区别，以及引擎盖下的内容？谢谢你的帮助。

【问题讨论】：

在您调用方法 add() 时在第二个代码中。计数器正在重置为零。因为 var counter = 0;因此总是 1
你应该阅读闭包。你会得到答案。这都与变量范围有关。 stackoverflow.com/questions/36636/what-is-a-closure
看来是我的错。第二个应该是：
0
var add = function () { var counter = 0; return function () {return counter += 1;} }; var temp = add();函数 myFunction(){ document.getElementById("demo").innerHTML = temp(); }

标签： javascript closures

【解决方案1】：

每当您执行一个函数时，就会创建一个闭包，闭包包含对在创建函数时分配的所有变量的引用。所以当你调用 add 函数时

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

它是一个返回另一个函数的函数，你返回的函数的闭包将引用计数器变量..

所以每当你调用 myFunction() 时，它都会为临时变量分配一个新函数，并使用它自己的计数器变量。该变量将始终从 0 开始...因为是新的

function myFunction(){
    temp = add();
    document.getElementById("demo").innerHTML = temp();
}

另一方面，自调用函数，将立即运行该函数，因此当您运行时

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

您将立即执行该函数，将函数分配给变量 add，add 变量将引用一个 返回计数器的函数..

【讨论】：

【解决方案2】：

自调用意味着您在声明后立即运行该函数。上面的函数是自调用的，但它仍然返回一个函数。即使在父函数完成后，返回的函数也有对计数器的引用——这就是闭包。

【讨论】：

【解决方案3】：

闭包是一个持久的局部变量作用域，即使在代码执行完成后它的值也会保持不变。在你的情况下，自调用函数是一个闭包，因此它总是将前一个值增加 1。在后一种情况下，在函数的正常调用中，每次调用函数时都会重新声明变量，因此它会重置值到 0。有关闭包的更多信息，请点击此处：What is a 'Closure'?

【讨论】：