尝试理解一些与JS中的闭包相关的代码

trying to understand some codes which is related to closure in js

本文关键字：闭包 代码 JS      更新时间：2023-09-26
<script type="text/javascript">   
function buildList(list) {
  var result = [];
  for (var i = 0; i < list.length; i++) {
    var item = 'item' + list[i];
    result.push( function() {console.log(item + ' ' + list[i])} );
  }
  return result;
}
function testList() {
  var fnlist = buildList([1,2,3]);
  fnlist[0]();
}
testList(); 
</script>

问题：

在火狐>控制台中，它显示item3 undefined，为什么？

你可以改变

result.push( function(( {console.log(item + ' ' + list[i](} (;

自

result.push( function(( {console.log(item + ' ' + list[i] + ' ' + i(} (;

然后你发现我是3，你应该使用Clousre来避免这个问题。

这是因为闭包引用的计算发生在语句(item + ' ' + list[i] + ' ' + i的执行时，到那个时候值i变为 4，这个list[4]返回 undefined。

执行顺序将是，您正在循环中i创建一个闭包变量，因此推送到result的所有函数引用都引用了相同的i实例，对变量所做的任何修改都将反映在每个添加的函数中，无论它是何时添加的。

在这种情况下，解决方案是使用 iife 在循环语句内创建一个私有闭包

演示：小提琴

相关文章：