Question

我在Javascript中使用闭包和自动撤销令人困惑。当我运行此代码时，每次单击按钮时计数器增加1.似乎分配给＆＃34;添加＆＃34;是自我调用的功能。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

闭包是一个持久的局部变量作用域，即使在代码执行完成后它仍然保持其值。在你的情况下，自调用函数是一个闭包，因此它总是将前一个值递增1.在后一种情况下，在函数的正常调用中，每次调用函数时都会重新声明变量，因此它会重置值为了更多关于闭包的内容：What is a 'Closure'?

Answer 2

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

Answer 3

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

时

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

它是一个函数返回另一个函数，你返回的函数的闭包会有一个对计数器变量的引用。

所以无论何时调用myFunction（），它都会为temp变量赋一个新函数，并带有自己的计数器变量。该变量将始终以0开始...因为是新的

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

另一方面，自动调用函数会在你运行

时立即运行该函数

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

你将执行该函数立即将函数赋值给变量add，add变量将引用一个函数返回一个计数器 ..

Javascript - 自调用和正常函数调用有什么区别？

3 个答案: