我不明白 mdn 的闭环错误示例

Question

1.MDN示例

下面的代码片段分配了一个函数，该函数在聚焦时显示每个文本字段的帮助文本，这里是JsFiddle的链接：https://jsfiddle.net/v7gjv/8164/

function showHelp(help) {
document.getElementById('help').textContent = help;
}

function setupHelp() {
var helpText = [
{'id': 'email', 'help': 'Your e-mail address'},
{'id': 'name', 'help': 'Your full name'},
{'id': 'age', 'help': 'Your age (you must be over 16)'}
];

for (var i = 0; i < helpText.length; i++) {
var item = helpText[i];
document.getElementById(item.id).onfocus = function() {
showHelp(item.help);
}
}
}

setupHelp();

但无论三个输入中的哪一个是焦点，它都只显示最后一个帮助文本。MDN表示，分配给所有三个输入的函数都是闭包，因此它们共享对变量helpText的相同引用，当循环结束时，i=2，因此所有三个输出都引用了helpText中的最后一项。

2.我的测试

我不明白的是，为什么所有三个输入都对同一变量项有相同的引用我做了一个类似的测试

(function() {
function closure() {
var i = 0;
return {
display: function() {
console.log(i);
},
add: function() {
i += 1;
}
}
}
var a = closure();
var b = closure();
a.add();
a.display(); //return 1
b.display(); //return 0 
})()

3.我的想法和问题

从测试来看，a和b有不同的i变量，a的i发生了变化，但b保持不变。但在for循环中，所有输入都指向同一个变量，因此for循环更改值i，导致所有输入指向helpText 中的最后一项

所以我的问题是，为什么它们指向同一个变量，但在我的测试中a，b没有。

Answer 1

在您的示例中，您在closure方法中声明变量i。当您第二次调用closure时，将在该特定函数执行的范围内创建一个新的i变量，并且返回的对象将绑定到该变量。

尝试将变量声明移到closure函数之外，您会看到结果与MDN示例相同。