在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在范围内捕获变量？

另外,上面使用的自调用函数是closure？

Answer 1

是的,这是一个关闭.

每次执行函数时,都会创建一个新对象来保存(作为其属性)声明的变量以及在其中声明的var每个函数.此对象称为执行上下文(或有时称为范围对象).

每次声明(或在表达式中定义)函数时,新函数都会附加当前的执行上下文对象.这创建了所谓的范围链.

当执行代码需要将标识符解析为值时,它首先在当前执行上下文的属性中查找它.如果未找到标识符,则它使用附加到正在执行的函数的exection上下文对象.它一直在范围链上升,直到达到全球水平.

在您的示例中,每次执行"自调用函数"时,都会创建一个新的执行上下文对象来保存属性el和num.由于分配给onclick的函数是在此执行上下文中创建的,因此每次都会获得此函数的新实例.这些实例将各自附加相应的执行上下文对象.因此,第一个将num具有已分配1的执行上下文,第二个将num具有已分配2 的执行上下文,依此类推.

当每个onclick函数运行时,代码将首先num在当前执行上下文中查找标识符.但是这个内部函数不会变量,因此找不到它.所以Javascript在创建函数时查看附加到函数的执行上下文.在这里它将发现num,num将包含在该迭代期间分配给它的值,如上所述.