javascript - jQuery 中的闭包可以访问可变变量

Question

我知道这可能是“双重发布”。但是我无法为我的问题分配解决方案。

我有 6 个文件上传输入字段。每当他们改变时，我想提醒“改变了!”。我想使用 for 循环遍历 6 个文件上传 ID。现在，它给我关于变量 i 的错误“Mutable variable is accessible from closure”。我看到了一些解决方案。但我无法使用这些解决方案来解决我的问题。

function fileUploadCheck() {
    for (var i = 1; i <= 6; i++) {
        $("document").ready(function () {
            $("#SOMEID"+i).change(function () {
                alert('changed!');
            });
        });
    }
}

Answer 1

jQuery 使用 implicit iteration 。您不必手动循环。

$("input[type=file]").change(function(event) {
  // check your console to see the value of `this`
  console.log(this, "changed");
});

---

来自 jQuery .each docs

Note: most jQuery methods that return a jQuery object also loop through the set of elements in the jQuery collection — a process known as implicit iteration. When this occurs, it is often unnecessary to explicitly iterate with the .each() method:

// The .each() method is unnecessary here:
$( "li" ).each(function() {
  $( this ).addClass( "foo" );
});

// Instead, you should rely on implicit iteration:
$( "li" ).addClass( "bar" );

---

关于“Mutable variable is accesible from closure”，参见这个简化的例子

for (var i=1; i<=6; i++) {
  setTimeout(function() {
    console.log(i);
  }, 100);
}

// 777777
// ALL SEVENS? WTF

原因是，闭包依赖于 i，但 i 在闭包之外发生变化。任何函数运行时，i 已经设置为 7，因此每个函数的日志输出为 7。

如果你用我上面的方法，你就完全不用担心这个了。如果您仍然对如何解决这个问题感到好奇，请参阅

for (var i=1, fn; i<=6; i++) {

  fn = (function(n) {
    console.log(n);
  })(i);

  setTimeout(fn, 100);
}

// 123456
// YAY

现在每个函数都正确地“绑定(bind)”了一个不可变的 i 输入；这意味着 i 的值不会在闭包包装函数内部发生变化。如果您对快捷方式感兴趣，请查看 Function.prototype.bind ^.^