Javascript 中具有自调用函数的作用域

Question

下面的代码迭代了 6 个输入按钮，并将一个 onclick 事件附加到每个按钮，以提醒相应迭代的索引号：

for (var i = 1; i < 6; ++i) {
    var but = document.getElementById('b_' + i);
    (function (el) {
        var num = i;
        but.onclick = function () {
            alert(num);
        };
    })(but);
}

如您所见，在每次迭代中都有一个自调用函数，该函数创建用于在该范围内存储迭代索引的范围。

我一直使用这种类型的模式来附加一个依赖于迭代期间更改的变量的事件。

---

谁能向我解释一下为什么上面的方法有效，以及如何在范围内捕获 num 变量？

另外，上面使用的自调用函数称为闭包吗？

Answer 1

是的，这是一个闭包。

每次执行函数时，都会创建一个新对象来保存（作为其属性）用var声明的变量以及在其中声明的每个函数。该对象称为执行上下文（有时称为作用域对象）。

每次声明函数（或在表达式中定义）时，新函数都会附加当前的执行上下文对象。这创建了所谓的作用域链。

当执行代码需要将标识符解析为值时，它首先在当前执行上下文的属性中查找它。如果未找到标识符，它将使用附加到正在执行的函数的执行上下文对象。它不断沿着作用域链向上延伸，直到达到全局级别。

在您的示例中，每次执行“自调用函数”时，都会创建一个新的执行上下文对象，其中包含属性 el 和 num。由于分配给 onclick 的函数是在此执行上下文中创建的，因此您每次都会获得该函数的一个新实例。这些实例都将附加相应的执行上下文对象。因此，当 num 被分配 1 时，第一个将具有执行上下文，第二个将具有 num 被分配 2 时的执行上下文，依此类推。

当每个 onclick 函数运行时，代码首先会在当前执行上下文中查找标识符 num。然而这个内部函数没有 var num 所以它没有找到。因此，Javascript 在创建函数时会查看附加到该函数的执行上下文。在这里它将找到 num，num 将包含在迭代期间分配给它的值，如上所述。

Answer 2

嘿伙计们。是的，这是一个关闭。如果您想知道创建函数时到底发生了什么，请学习以下文章。
http://www.jibbering.com/faq/faq_notes/closures.html

Answer 3

这是否意味着在闭包外部定义的 var i 是一个全局变量，从而允许自调用函数访问它？

Answer 4

每次循环时，计算 function (el) {...} 都会创建一个新的匿名函数，并立即调用该函数。在匿名函数中，创建了一个名为num的变量（因为JS不做静态变量，所以每次都是一个新变量）。当调用该函数时（立即），num 被赋予i 的值。这为我们提供了 6 个匿名函数和 6 个 num，每个函数保存值 1 到 6。

每次调用匿名函数时，都会创建一个内部匿名函数并将其存储为点击处理程序。内部函数引用num。结果，创建了一个闭包，确保当外部函数退出时，num不会被销毁。如果内部函数被丢弃，num 很快就会被丢弃。

Answer 5

for (var i = 1; i < 6; ++i) {
    var but = document.getElementById('b_' + i);
    (function (el) {
        var num = i;
        but.onclick = function () {
            alert(num);
        };
    })(but);
}

现在让我们开始执行循环
最初 i=1，但是= id ='b1' 的 domelement
现在是函数调用，
好的，它调用内部函数（带参数 el），参数值为 but('b1')
并开始执行它，这就是调用实际上意味着立即执行它。
现在在里面，
num 的新实例被分配 1
但是.onclick 被分配了一个函数，因此在内存中存储函数也会看到它访问 num，因此 num 现在是封闭变量，这意味着它的生命周期增加，以便在调用时被 onclick 函数访问。

下一次迭代< /strong>
现在 i=2 的值，但是= id ='b2' 的 domelement
现在是函数调用，
它调用内部函数（带参数 el），参数值为 but(value='b2') 。
现在在里面，
num 的新实例被分配 2
但是.onclick 被分配了一个函数，因此在内存中存储函数也会看到它访问 num，因此 num 现在是封闭变量，这意味着它的生命周期增加，以便在调用时被 onclick 函数访问。
类似地，所有其他的都会被执行，直到循环终止。