如何将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的引用？

Answer 1

您需要通过将其作为函数参数来创建一个单独的范围，节省的变量在其当前状态：

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

你正在关闭关闭。 Here's an article on closures以及如何与他们合作。查看页面上的示例5;这是你正在处理的场景。

编辑：四年后，该链接已死亡。上述问题的根源在于for循环形成了闭包（特别是在marker = results[i]）。由于被传入addEventListener，所以您会看到闭包的副作用：共享“环境”在循环的每次迭代中都会更新，最终迭代后最终通过闭包“保存”它。 MDN explains this very well.

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

还有关闭，您可以使用function.bind：

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

通过价值i我n作为被调用函数的参数。 （null是结合this，你不要在这种情况下需要。）

function.bind由原型框架引入并在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 5

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

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); 
}); 
} 

虽然我还没有测试过。

Answer 6

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)); 
}