如何在列表函数中修复此闭包

How can I fix this closure within a list function?

本文关键字:闭包 函数 列表      更新时间:2023-09-26

这个非常好的Stack Overflow答案给出了一个例子,说明当在列表中返回匿名函数时,闭包是如何反直觉地工作的。

function buildList(list) {
    var result = [];
    for (var i = 0; i < list.length; i++) {
        var item = 'item' + i;
        result.push( function() {alert(item + ' ' + list[i])} );
    }
    return result;
}
function testList() {
    var fnlist = buildList([1,2,3]);
    // Using j only to help prevent confusion -- could use i.
    for (var j = 0; j < fnlist.length; j++) {
        fnlist[j]();
    }
}

此代码将返回:

item2 undefined
item2 undefined
item2 undefined

我的问题是,您将如何修改此代码,使其返回我们期望的结果?

item0 1
item1 2
item2 3

buildListfor循环中使用IIFE,并传入i

这将确保传入的i将保持封闭在IIFE闭包中,并且不会被for循环中的i更改

function buildList(list) {
  var result = [];
  for (var i = 0; i < list.length; i++) {
    //the IIFE
    (function(i) {
      var item = 'item' + i;
      result.push(function() {
        console.log(item + ' ' + list[i])
      });
    })(i);
  }
  return result;
}
function testList() {
  var fnlist = buildList([1, 2, 3]);
  // Using j only to help prevent confusion -- could use i.
  for (var j = 0; j < fnlist.length; j++) {
    fnlist[j]();
  }
}
testList();