jQuery事件处理程序的JavaScript闭包

Question

我有一个对象列表,每个对象都有一个.bullet,它是一个SPAN.我想将跨度上的单击绑定到处理程序,而不是使用jQuery对跨度执行某个操作.我看到一些我不理解的行为,所以我希望有人可以解释发生了什么.基本上,这个第一个代码示例有效:

for (var i = 0 ; i< length ; i++) {

            (function(){
                dataNode = dataNodeList[i];

                var handler = function(e) {

                    e.data.node.bullet.firstChild.nodeValue = "- ";


                };


                $(dataNode.bullet).on("click",{node:dataNode},handler);


            })();

        }

但是,第二个变体不起作用:

for (var i = 0 ; i< length ; i++) {

            (function(){
                dataNode = dataNodeList[i];

                var handler = function() {

                    dataNode.bullet.firstChild.nodeValue = "- ";


                };


                $(dataNode.bullet).on("click",handler);


            })();

        }

在第二个例子中,

dataNode.bullet.firstChild.nodeValue = "- ";

对我想要的SPAN的价值没有影响.我期望dataNode.bullet仍然指向我想要因为JavaScript关闭而改变的SPAN.那么,有人能解释为什么会失败吗？谢谢.

Answer 1

试试这个:

for (var i = 0 ; i< length ; i++) {
    (function(index){
        var dataNode = dataNodeList[index];

        var handler = function() {
            dataNode.bullet.firstChild.nodeValue = "- ";
        };

        $(dataNode.bullet).on("click",handler);
    })(i);
}

闭包定义了一个新的范围.这是必要的,因为直到循环结束后才调用处理程序,因此i在调用它时不是作用域的一部分,或者(在某些情况下)具有循环中的最后一个可能值.