先抛出原问题：
for (var i = 0; i < 10; i++) {
divs[i].onmouseover = function () {
this.style.backgroundColor = "red";
this.style.left = -55*i;
}；
}测试结果显示：鼠标经过所有div时，北京颜色会变成红色，但是所有div的定位都为-55*10！这就是问题所在！
正好在JS闭包理解上还不是很通透，为找出问题所在，特意写了一个小小的demo：
<!DOCTYPE html>
<html>
<body>
<div id="header">
<p id="p">This is a word!</p>
</div>
</body>
<script type="text/javascript">
p.onclick = function() {
var header = document.getElementById('header');
var p = document.getElementById('p');
// 生成十个测试的span
for (var i = 0; i < 10; i++) {
var ele_span = document.createElement("span");
ele_span.id = "id_" + i;
ele_span.innerHTML = "This is" + i + "span";
header.appendChild(ele_span);
};
var spans= document.getElementsByTagName("span");
for (var i = 0; i < 10; i++) {
spans[i].onmouseover = function () {
console.log(i);
console.log(this);
this.style.backgroundColor = "red";
}
document.getElementById("id_"+i).onclick = function(i) {
console.log(this);
console.log(i);
this.style.backgroundColor = "green";
}
};
}
</script>
</html>点击段落，生成十个span，id从1~10，接着通过for循环为每个span绑定mouseover以及click事件，鼠标经过每个元素时，背景颜色变成红色，但是console.log(i)输出永远都是10。结果如图：
那试着把i通过参数传递到click绑定函数呢？情况会怎样？如果你认为console.log(i)会输出相应的i值，那你就被参数i骗了！参数i只是一个参数名，想写成啥写啥，不过一般的写法都是e，以为绑定事件，传递到时间函数的参数是事件本身，有图有真相：
这样的话，想通过这样把参数i值传递到时间函数里是没门了。这时候，闭包的功力就立体现了：
for (var i = 0; i < 10; i++) {
document.getElementById("id_"+i).onclick = (function (i) {
console.log(i);
})(i);
};测试结果如下：
从结果可以看出，匿名函数自动执行，而且每次循环的i值传递到匿名函数里，这样就实现值传递了。
画个小图理解思路：
JavaScript也采用此法作用域，函数执行依赖于变量作用域，这个作用域是在函数定义时决定的，而不是调用时决定的。局部变量作用域具有局部性的，当JavaScript需要查找变量i时，先查找本作用域，这里就是先查找事件函数，如果没有查找到，就往上查找外部对象，这里就查找到for循环里的变量，此时找到了，就取得i的值，但此时i的值已经自增到10，所以console.log(i)输出10；JavaScript变量查找通过变量的作用域查找，不断往顶层作用域查找，直到global对象，如果在global对象中还没有查找到变量，就会抛出引用错误（ReferenceError）异常。
这就是JavaScript变量作用域的特性的，可以通过闭包实现变量保存在函数作用域中。
285
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
