javascript - JavaScript 中闭包的奇怪行为

标签 javascript

<分区>

以下程序以意外方式执行。这是为什么?基于闭包返回对 i 的引用而不是 i 的值这一事实,我有一些模糊的理解。由于最后 i 的值为 3,因此它将在所有地方应用这些值。

function idCreator (peopleList) {
    var i;
    var uniqueID = 100;
    for (i = 0; i < peopleList.length; i++) {
      peopleList[i]["id"] = function ()  {
        return uniqueID + i;
      }
    }
    return peopleList;
}

var myFriends = [{name:"ABC", id:0}, {name:"PQR", id:0}, {name:"XYZ", id:0}];

var createIdForMyFriends = idCreator (myFriends);

var abcID = myFriends [0];
console.log(abcID.id()); // 103

最佳答案

问题是您在循环中创建的每个闭包都引用同一个变量i;函数执行时 i 的值不一定是创建闭包时的值。 (在您的情况下,它将是循环终止时 i 的值,即 3。)您可以使用返回闭包的单独函数来修复此问题:

function idCreator (peopleList) {
    var i;
    var uniqueID = 100;
    for (i = 0; i < peopleList.length; i++) {
      peopleList[i]["id"] = closureCreator(i);
    }
    return peopleList;
}

function closureCreator(i) {
    return function ()  {
        return uniqueID + i;
    };
}

这是一种使用 IIFE 的方法:

peopleList[i]["id"] = (function(loop_i) {
    return function()  {
        return uniqueID + loop_i;
    };
)(i));

关于javascript - JavaScript 中闭包的奇怪行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23136490/

相关文章:

javascript - 如果选择了 item-all,则选择所有选项

javascript - 我怎样才能使它成为一个异步函数

javascript - 无法在 JSF 中用 JavaScript 替换 div 内容

javascript - 单击鼠标时角色不会移动到正确的目的地/错误的 Angular - html canvas

javascript - Chrome 31.0 HTML5 Canvas 绘制图像

javascript - 将悬停区域扩展到外部元素

JavaScript — 为每个类名随机分配 8 个唯一数字

javascript - types.json 中的 globalDependency 和 globalDevDependency 有什么区别?

javascript - 避免同步 ajax 请求并显示加载

javascript - 在经典 ASP 中将 VBScript 数组转换为 Javascript 数组