如何在循环外移动函数

Question

JSHint尖叫着应该在循环之外声明函数,我只是对如何做到这一点感到困惑？具体部分:self.onchange = function(){...}

这是循环:

for ( var j = 0; j < checkz.length; j++ ) {
    var self = checkz[j];
    self.onchange = function () {
        for ( var z = 0; z < psswrd.length; z++ ) {
            psswrd[z].type = self.checked ? 'text' : 'password';
        }
    };
}

当我将它移到外面并分配它时,该功能会因为'self'变得不确定而中断.任何建议表示赞赏

Answer 1

在这种情况下,您只需要一个功能:

for ( var j = 0; j < checkz.length; j++ ) {
    var self = checkz[j];
    self.onchange = changeFunction;
    // Or replace the above two lines with:
    // checkz[j].onchange = changeFunction;
    // ...if you don't need `self` for anything else.
}

function changeFunction() {
    for ( var z = 0; z < psswrd.length; z++ ) {
        psswrd[z].type = this.checked ? 'text' : 'password';
        //               ^^^^--- note this changed from `self` to `this`
    }
}

无论如何,你需要self=> this更改,因为原来,所有函数都会引用相同的值self.在创建函数时,它对创建它的上下文中的变量有持久的引用,而不是在创建它时的值的副本.(更多:闭包并不复杂)在这种情况下,我们可以使用this因为在一个事件处理程序中以这种方式连接(以及大多数方式),this将是事件处理程序连接到的元素.

现在在一般情况下,有时你需要引用循环中正在发生变化的东西而你碰巧没有替代它,你通常会使用一个构建器函数来返回要使用的函数,就像这样:

for ( var j = 0; j < checkz.length; j++ ) {
    var self = checkz[j];
    self.onchange = buildChangeFunction(j);
}

function buildChangeFunction(jarg) {
    return function() {
        // Use jarg in here...
    };
}

这样,我们分配的函数onchange关闭了参数buildChangeFunction,而不是j,并且该参数不会改变.

但同样,你不需要这里,上面的第一个解决方案就是你所需要的.