需要更多关于 w3schools javascript 闭包示例的解释答案

【问题标题】：need more explanation on w3schools javascript closure example需要更多关于 w3schools javascript 闭包示例的解释
【发布时间】：2016-02-26 18:06:59
【问题描述】：

我正在尝试了解闭包，并且正在查看 W3Schools javascript 教程。这是他们通过制作计数器给出的一个例子。

<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 被赋值为 a 的返回值自调用函数。

自调用函数只运行一次。它将计数器设置为零 (0)，并返回一个函数表达式。

这样 add 就变成了一个函数。 “美妙”的部分是它可以访问父范围内的计数器。

这称为 JavaScript 闭包。它使一个成为可能函数具有“私有”变量。

计数器受匿名函数范围的保护，并且只能使用 add 函数更改。

注意闭包是一个可以访问父作用域的函数，甚至父函数关闭后。

解释还不错，但有几件事不清楚。为什么自调用函数是最好用的？为什么嵌套匿名函数不是自调用函数？当计数器已经在其中返回时，为什么还要返回整个匿名函数？

【问题讨论】：

这就是 W3schools 编写示例的方式。虽然这里是“试用”窗口的链接，但它可以工作。 w3schools.com/js/… 代码。它有效。
让我编辑一下....

标签： javascript closures anonymous-function self-invoking-function

【解决方案1】：

闭包的概念可以解释为具有函数及其上下文。上下文在某种程度上是一种附加到函数的存储，用于解析捕获的变量（因此命名为闭包？）。

示例代码执行时：

var add = (function () {
    var counter = 0; // This is promoted to the below's function context
    return function () {return counter += 1;}
})();

您创建一个上下文，其中counter 变量被提升为匿名函数上下文，因此您可以从当前范围访问该变量。

这张图或多或少地解释了它：

在这种情况下，X 和 Y 由函数上下文捕获，并在该函数的所有执行中进行。

现在，这只是 lexical environments 的 V8 实现。

请参阅 Vyacheslav Egorov 关于使用 V8 实现闭包的精彩解释：Grokking V8 closures for fun (and profit?)

【讨论】：