闭包相关的代码

还是以之前写过的文章:单击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);
}
}
原文链接:闭包相关的代码 版权所有,转载时请注明出处,违者必究。
注明出处格式:前端开发博客 (http://caibaojian.com/closure-code.html)

发表评论

请登录后发表评论:

1 Responses to “闭包相关的代码”

  1. 链接通知 : JavaScript闭包闭包闭包 - 纯洁blog