Question

我有这段代码。

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

为变量add分配自调用的返回值功能

这是否意味着，每次调用add时，只调用函数的返回而不是整个函数？

如果没有，有人可以解释一下吗？

Answer 1

是的，只有在调用add()函数时才调用IIFE内部返回的函数。

在执行阶段，当解析器遇到时，在页面加载~~上调用IIFE，并返回另一个函数作为稍后调用的引用。~~

外部IIFE唯一要做的就是将counter变量保留在它自己的范围内。

IIFE == Immediately-invoked function expression

Answer 2

在以下代码中，您有一个返回函数的函数：

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

立即执行外部功能。因此，add被分配给内部函数：

function () {
    return counter += 1;
}

如您所见，内部函数中的counter变量引用外部函数的上下文（其中声明了counter）。此上下文称为closure，仍在内部函数中引用。因此，JavaScript使这个上下文保持活跃。

正如 @RobG 所指出的，内部JavaScript执行规则更像是：内部函数中的标识符counter首先在内部执行上下文中解析。由于在那里找不到，所以搜索范围链上的下一个对象，即外部执行上下文，并在那里找到counter。

因此，通过闭包的魔力，在调用内部函数时仍然可以访问和更改counter变量（使用add）。

因此，在调用add时，您正在执行内部函数，该函数正在关闭counter。

混乱与javascript中的关闭

2 个答案: