在JavaScript闭包中使用自调用函数

Use of self-Invoking functions in JavaScript closures

本文关键字：调用 函数 JavaScript 闭包      更新时间：2023-09-26

我目前正在阅读JavaScript。我正在读关于JavaScript中的闭包(允许"私有变量")的章节，网址是http://www.w3schools.com/js/js_function_closures.asp.

示例是一个计数器:

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

它声明它使用一个自调用函数将计数器设置为0 一次，并在add()的每次迭代中将计数器加1。然而，我在代码中看到，用于自调用函数的花括号是围绕counter = 0和函数增量计数器。对于我来说，很难想象这两个命令是如何在自调用函数中精确地运行的，但是一个只运行一次，而另一个运行每次迭代。

让我们把这个问题分成几个部分:

(1)

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

第一部分是自调用匿名函数，这意味着add将接收该函数执行的结果。在本例中，它只是下面的匿名函数:

function () {return counter += 1;}   (2)

所以这意味着add将是一个函数!

现在有趣的部分是在siaf(1)(自调用匿名函数)内部，我们声明了一个计数器变量，初始化为0: 
var counter = 0;

因为计数器属于(2)的外部作用域，所以(2)可以访问它!

JavaScript所说的是，一个函数在创建时将捕获它的环境并持久化它，所以闭包(close over)只不过是一个函数和它的创建环境的组合。这意味着在返回语句之后，add函数现在将保存对(2)的引用，它仍然可以访问初始设置为0的计数器变量;

so要增加计数器，我们需要increment(2)，这意味着像这样增加add: 

add();

p。用function构造函数创建的函数，并以与(2)相同的方式返回，不会捕获计数器变量!!

相关文章：