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

Son*_*Gao 0 javascript self-invoking-function

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

这个例子是一个计数器:

<!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>
Run Code Online (Sandbox Code Playgroud)

它声明它使用自调用函数将计数器设置为0 一次,并在每次迭代add()时递增计数器.但是,我在代码中看到,用于自调用函数的花括号围绕着counter = 0和增加计数器的函数.我很难想象两个命令在自调用函数中的确切程度,但只运行一次,而另一个运行每次迭代.

jpr*_*ton 5

让我们把这个问题分解成碎片:

(1)

 var add = (function () {
        var counter = 0;
        return function () {return counter += 1;}
    })();
Run Code Online (Sandbox Code Playgroud)

第一部分是自调用匿名函数,这意味着add将接收执行此函数的结果.在这种情况下,只有以下匿名函数:

function () {return counter += 1;}   (2)
Run Code Online (Sandbox Code Playgroud)

所以这意味着添加将是一个功能!

现在有趣的部分是在siaf(1)(自调用 - 匿名函数)中,我们声明一个计数器变量,初始化为零:

var counter = 0;
Run Code Online (Sandbox Code Playgroud)

因为计数器属于(2)的外部范围,所以(2)可以访问它!

JavaScript所说的是,创建的函数将捕获其环境并持久化,因此闭包(close)只不过是函数与其创建环境的组合.这意味着在return语句之后,现在将保存对(2)的引用的add函数仍然可以访问最初设置为0的计数器变量;

所以为了递增计数器,我们需要递增(2),这意味着递增加这样:

add();
Run Code Online (Sandbox Code Playgroud)

ps:用Function构造函数创建的函数,以与(2)相同的方式返回,不会捕获计数器变量!!