JavaScript变量作用域和事件处理程序

Question

请参阅jsfiddle:http: //jsfiddle.net/LsNCa/2/

function MyFunc() {

    for (var i = 0; i < 2; i++) { // i= 0, 1
        var myDiv = $('<div>');

        myDiv.click(function(e) {
            alert(i);    // both the two divs alert "2", not 0 and 1 as I expected
        });
        $('body').append(myDiv);
    }
}

var myFunc = new MyFunc();

当我点击它时,我希望div分别提醒"0"和"1".但他们都警告"2".

当我单击div并触发事件时,处理程序如何以及在何处找到变量i的值？

我知道添加一个闭包可以实现我的目标.但为什么？

Answer 1

    function MyFunc() {

    for (var i = 0; i < 2; i++) { // i= 0, 1
        (function(j) {
            var myDiv = $('<div>');

            myDiv.click(function(e) {
                alert(j);
            });
            $('body').append(myDiv);
        })(i);
    }
}

var myFunc = new MyFunc();

上面的代码是你如何使它正常工作.没有闭包,你总是i的最后一个值.我们所做的是将i发布到闭包中,让运行时"记住"当时的值.