javascript - 循环中的闭合不响应通常的操作

Question

乍一看，这看起来像是同样古老的“循环闭包”问题，但应用我通常的解决方案并不能真正解决问题。代码如下:

G.MultiToggle = function(each){
    //data takes the form
    //[{"data":(see Toggle), "onOpen":function(){}, "onClosed":function(){}},...]
    this.children = [];
    var which = null;
    var toggles = [];
    var that = this;
    function makeOpenFn(j){
        var info = each[j];
        console.log(j);
        return function(){
            console.log(j);
            info["onOpen"]();
            if(which!=null){
                toggles[which].close_up();
            }
            which = j;
        };
    };
    function makeClosedFn(j){
        var info = each[j];
        console.log(j);
        return function(){
            console.log(j);
            info["onClosed"]();
            which = null;
        };
    };
    function makeToggler(obj,opener,closer) {
        return new G.Toggle(
           obj.data,
           opener,
           closer
        );
    };
    for(var i=0; i<each.length; i++){
        var openFn = makeOpenFn(i);
        var closedFn = makeClosedFn(i);
        toggles[i] = makeToggler(each[i],openFn,closedFn);
        toggles[i].close_up();
        that.addChild(toggles[i]);
    }
    console.log(toggles);
}
G.MultiToggle.prototype = new createjs.Container();

稍后，切换对象将 openFn 和 closeFn 用作事件处理程序。当它们被调用时，它们都会输出 i=2 的结果。我尝试将信息变量声明移动到内部函数中，以及许多其他体操排列。我正在把我的头发拔出来，就在这里。任何帮助，将不胜感激。编辑:添加了更多上下文的周围代码。

Answer 1

这是旧的循环闭包问题。只是，您错过了一个变量:

for(var i=0; i<each.length; i++){
    openFn = makeOpenFn(i); //------ looks OK
    closedFn = makeClosedFn(i); //-- looks OK
    toggles[i] = function(){
        return new G.Toggle(
           each[i].data, //--------- AHA! closure in a loop!
           openFn,
           closedFn
        );
    }();
    toggles[i].close_up();
    that.addChild(toggles[i]);
}

您只需要打破 that i 的闭包即可:

    toggles[i] = function(new_i){
        return new G.Toggle(
           each[new_i].data,
           openFn,
           closedFn
        );
    }(i);

或者，如果您更喜欢其他函数的风格:

function makeToggler(obj,opener,closer) {
    return new G.Toggle(
       obj.data,
       opener,
       closer
    );
}

for(var i=0; i<each.length; i++){
    openFn = makeOpenFn(i); //------ looks OK
    closedFn = makeClosedFn(i); //-- looks OK
    toggles[i] = makeToggler(each[i],openFn,closedFn);
    toggles[i].close_up();
    that.addChild(toggles[i]);
}