javascript - 在 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 a num，所以它没有找到。因此，Javascript 会在创建函数时查看附加到该函数的执行上下文。它会在这里找到 num，num 将包含如上所述在该迭代期间分配给它的值。