闭包相关的代码


还是以之前写过的文章:单击li,输出当前li在列表的序号中的代码为例子。

html结构为一个无序列表,点击li输出每个在ul中的序号。代码如下:

<ul id="list">
<li>序号1</li>
<li>序号2</li>
<li>序号3</li>
<li>序号4</li>
<li>序号5</li>
<li>序号6</li>
<li>序号7</li>
<li>序号8</li>
<li>序号9</li>
<li>序号10</li>
</ul>

常见错误的写法:

var list = document.getElementById("list");
var li = list.getElementsByTagName("li");
for (var i = 0; i < li.length; i++) {
li[i].onclick = function() {
alert(i);// 每个点击弹出来的结果:10,10,……
}
}

正确做法:

使用闭包1

for (var i = 0; i < li.length; i++) {
msg(i)
function msg(num){
li[num].onclick = function() {
alert(num + 1);
}
}
}
msg = null;

使用闭包2

for(var i = 0; i < li.length; i++){
(function msg(num){
li[num].onclick = function(){
alert(num + 1);
}
})(i);
}
msg = null;

非闭包,使用属性保存

for(var i = 0; i < li.length; i++){
li[i].i = i;
li[i].onclick = function(){
alert(this.i + 1);
}
}

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>