如何将 JS 变量的值（而不是引用）传递给函数？

Question

这是我尝试运行的简化版本：

for (var i = 0; i < results.length; i++) {
    marker = results[i];
    google.maps.event.addListener(marker, 'click', function() { 
        change_selection(i);
    }); 
}

但我发现每个侦听器都使用 results.length 的值（for 循环终止时的值）。如何添加侦听器，以便每个侦听器在添加时使用 i 的值，而不是对 i 的引用？

Answer 1

在现代浏览器中，您可以使用 let 或 const 关键字创建块作用域变量：

for (let i = 0; i < results.length; i++) {
  let marker = results[i];
  google.maps.event.addListener(marker, 'click', () => change_selection(i));
}

---

在较旧的浏览器中，您需要创建一个单独的作用域来将变量保存在通过将其作为函数参数传递来获取其当前状态：

for (var i = 0; i < results.length; i++) {
  (function (i) {
    marker = results[i];
    google.maps.event.addListener(marker, 'click', function() { 
      change_selection(i);
    }); 
  })(i);
}

通过创建一个匿名函数并使用该变量作为第一个参数来调用它，您可以按值传递给该函数并创建一个闭包。

Answer 2

除了闭包之外，您还可以使用 function.bind：

google.maps.event.addListener(marker, 'click', change_selection.bind(null, i));

在调用时将 i 的值作为参数传递给函数。 （null 用于绑定 this，在本例中不需要。）

function.bind 是由 Prototype 框架引入的，并且具有在 ECMAScript 第五版中已标准化。在所有浏览器都原生支持它之前，您可以使用闭包添加您自己的 function.bind 支持：

if (!('bind' in Function.prototype)) {
    Function.prototype.bind= function(owner) {
        var that= this;
        var args= Array.prototype.slice.call(arguments, 1);
        return function() {
            return that.apply(owner,
                args.length===0? arguments : arguments.length===0? args :
                args.concat(Array.prototype.slice.call(arguments, 0))
            );
        };
    };
}

Answer 3

关闭：

for (var i = 0, l= results.length; i < l; i++) {
    marker = results[i];
    (function(index){
        google.maps.event.addListener(marker, 'click', function() { 
            change_selection(index);
        }); 
    })(i);
}

编辑，2013 年：
这些现在通常被称为 IIFE

Answer 4

你即将结束。 这是一篇关于闭包的文章以及如何使用它们。查看页面上的示例 5；这就是您正在处理的场景。

编辑：四年后，该链接已失效。上述问题的根源在于 for 循环形成了闭包（特别是在 marker = results[i] 上）。当 marker 被传递到 addEventListener 时，您会看到闭包的副作用：共享“环境”在最终“保存”之前随着循环的每次迭代而更新通过最终迭代后的闭包。 MDN 很好地解释了这一点。

Answer 5

for (var i = 0; i < results.length; i++) {
    marker = results[i];
    google.maps.event.addListener(marker, 'click', (function(i) {
        return function(){
            change_selection(i);
        }
    })(i)); 
}

Answer 6

我认为我们可以定义一个临时变量来存储i的值。

for (var i = 0; i < results.length; i++) {
 var marker = results[i];
 var j = i;
 google.maps.event.addListener(marker, 'click', function() { 
   change_selection(j);
 }); 
}

不过我还没有测试过。