Dojo”;在“;复选框更改内部循环范围问题

Dojo "On" Checkbox Change Inside For Loop Scope Issue

本文关键字：内部 循环 范围 问题 复选框 Dojo      更新时间：2023-09-26

我正在使用Esri的Javascript Library 3.10，它是基于Dojo的。我的范围有问题，尽管尝试了不同的变体，但我仍然得到了相同的结果。也许有更好的方法可以做到这一点，但我似乎想不通。

我想遍历一个包含一组复选框的键的对象，然后使用dojo/on分配一个事件处理程序来设置基于键的值，然而，on（…）函数中的键"setting"在所有四次迭代中都是相同的。

for (var setting in this.appSettings) {
    console.log(setting); //prints four different things
    if (this.hasOwnProperty(setting)) {
        this.checkboxHandles[setting] =
                On(this[setting], 'change', function (checked) {
                    //this.setValue(setting, checked)
                    console.log(setting) //prints the last 'setting' whenever checkbox is changed
                });
    }
}

因此，即使for循环通过四个唯一的键进行循环，On函数内部的设置也始终是相同的值。首先，为什么会发生这种情况，对解决这种问题有什么建议？

这是JavaScriptessentials之一。闭包总是通过引用来引用它们的外部作用域变量。这意味着事件处理程序引用了setting变量。但是，当for循环继续时，setting变量正在引用数组中的下一个值。

这个问题的解决方案是我们所说的IIFE或立即调用函数表达式。

如果用返回函数的函数替换事件处理程序，例如：

On(appSettings[setting], 'change', function (setting) {
  return function(checked) {
    //this.setValue(setting, checked)
    console.log(setting) //prints the last 'setting' whenever checkbox is changed       
  }
}(setting));

因此，这里发生的是setting变量被传递给函数包装器，这样做的优点是它们是通过值传递的，而不是通过引用传递的。

因此，如果您从该函数内部访问setting变量，它将引用传递给该函数的本地作用域setting变量。

它看起来有多奇怪，它的工作原理是：http://jsfiddle.net/8sxqn53d/这里可以找到一个有趣的幻灯片来解释这种行为。

相关文章：