您的位置：首页 > Web前端 > JavaScript

JavaScript—在循环中创建闭包：一个常见错误

2017-03-05 10:21 501 查看

在循环中创建闭包：一个常见错误EDIT

在 JavaScript 1.7 引入

let

关键字之前，闭包的一个常见的问题发生于在循环中创建闭包。参考下面的示例：

<p id="help">Helpful notes will appear here</p>
<p>E-mail: <input type="text" id="email" name="email"></p>
<p>Name: <input type="text" id="name" name="name"></p>
<p>Age: <input type="text" id="age" name="age"></p>

function showHelp(help) {
document.getElementById('help').innerHTML = 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();

数组

helpText

中定义了三个有用的提示信息，每一个都关联于对应的文档中的输入域的 ID。通过循环这三项定义，依次为每一个输入域添加了一个

onfocus

事件处理函数，以便显示帮助信息。

运行这段代码后，您会发现它没有达到想要的效果。无论焦点在哪个输入域上，显示的都是关于年龄的消息。

该问题的原因在于赋给

onfocus

是闭包（setupHelp）中的匿名函数而不是闭包对象；在闭包（setupHelp）中一共创建了三个匿名函数，但是它们都共享同一个环境（item）。在

onfocus

的回调被执行时，循环早已经完成，且此时

item

变量（由所有三个闭包所共享）已经指向了

helpText

列表中的最后一项。

解决这个问题的一种方案是使onfocus指向一个新的闭包对象。

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

function makeHelpCallback(help) {
return function() {
showHelp(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 = makeHelpCallback(item.help);
}
}

setupHelp();

这段代码可以如我们所期望的那样工作。所有的回调不再共享同一个环境，

makeHelpCallback

函数为每一个回调创建一个新的环境。在这些环境中，

help

指向

helpText

数组中对应的字符串。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航