Question

选项1：

function addLinks () {
    for (var i=0, link; i<5; i++) {
        link = document.createElement("a");
        link.innerHTML = "Link " + i;
        link.onclick = function () {
            alert(i);
        };
        document.body.appendChild(link);
    }
}
window.onload = addLinks;

选项2：

function addLinks () {
    for (var i=0, link; i<5; i++) {
        link = document.createElement("a");
        link.innerHTML = "Link " + i;
        link.onclick = function (num) {
            return function () {
                alert(num);
            };
        }(i);
        document.body.appendChild(link);
    }
}
window.onload = addLinks;

我知道选项1：因为关闭而每次点击都会输出5，但选项2会输出正确的结果，0,1,2 ......

我的问题是：选项2如何解决问题？选项2如何运作？

Answer 1

选项1中的变量i位于函数addLinks()的范围内（因为它在该函数中被声明为var）。它只被调用一次，只有一个范围被分配给onclick的所有五个函数共享。

在选项2中，变量num在匿名函数的范围内（因为它是该函数的形式参数）。它被称为五次;有五个独立的范围，分别用于分配给onclick的五个函数中的每一个。

这有帮助吗？

试图了解js中的闭包问题

1 个答案: