如何将函数移出循环

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 的 相同 值。当您创建一个函数时，它在创建它的上下文中具有对变量的持久引用，而不是创建它时它们的值的副本。 （更多：Closures are not complicated）在这种情况下，我们可以使用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，并且该参数不会改变。

但同样，您在这里不需要，上面的第一个解决方案就是您所需要的。