javascript 大虾指教

Question

function prepareGallery(){
if(!document.getElementById) return false;
if(!document.getElementById("imagegallery")) return false;
var gallery = document.getElementById("imagegallery");
var links = gallery.getElementsByTagName("a");
for(var i = 0; i<links.length; i++){
links[i].onclick = function(){
return showPic(this);
//return showPic(links[i]);

}
}
}
window.onload = prepareGallery;
如上的代码  把return showPic(this);  换成注释掉的那句话不行  如果在return showPic(links[i]);的上面再加上一句alert(i);的话  总是会弹出4  请大虾指导指导小弟    小弟 分少 见谅

Answer 1

去看js的无名函数.你的问题是你还没理解这个东东. 如果你理解类似C++等语言中的作用域,或者命名空间之类的概念,你就会明白return showPic(links[i]);中的i并不是你期望的 for(var i = 0; i<links.length; i++){} 循环的括号括起来的区域中的i,而是全局变量i;
return showPic(this); //这个是对的i总是等于4的原因在于,for(var i = 0; i<links.length; i++)这个执行完毕之后,你的i的值恰好等于4.

Answer 2

这个问题很典型，alert(i)的值为4推测links.length一定是4个。问题在于你为事件处理函数绑定的i值并不是函数创建时的i值,事件触发时，内部函数访问的实际变量i的值是已经循环结束后的值 4。可如下修改代码：
function prepareGallery(){
    if(!document.getElementById) return false;
    if(!document.getElementById("imagegallery")) return false;
    var gallery = document.getElementById("imagegallery");
    var links = gallery.getElementsByTagName("a");
    for(var i = 0; i<links.length; i++){
        links[i].onclick = function(i){ 
        //return showPic(this);
        return showPic(links[i]);
        }(i);
    }
}
window.onload = prepareGallery;

Answer 3

return showPic(links[i]);中的i并不是你期望的 for(var i = 0; i<links.length; i++){} 循环的括号括起来的区域中的i,而是全局变量i;links[i].onclick = function(){
alert(i);   //显示为4
return showPic(links[i]);}
但为什么用上面这个显示的时候为  4  若里面的i为全局变量i  应该和for里的局部变量i  没关系啊  
  搞不明白？？？

Answer 4

这个很容易理解的links[i].onclick当你点击按钮的时候 alert(i); //显示为4
return showPic(links[i]); 才会执行这两句代码你想想你点这按钮的时候   for早就完了   i肯定就是links.length了

Answer 5

所以说  alert(i);  中的那个i 也不是 什么全局变量了 ？？？

Answer 6

典型的闭包问题。
javascript是边解释边执行。
你把函数绑定在links[i].onclick上。这个时候，i并没有被运算出来。
当触发了onclick事件的时候，i已经for循环完了。最后退出for循环的时候i==links.length
所以，最后无论怎么click，i永远等于4顺便说一下
for (var i = 0; i < 4; i++) {}
alert(i);
这句话应该最后打出4。
原因很简单，javascript的作用域只有function内和外。不存在for的作用域。
你的代码，onclick的时候，就直接拿着这个i去运算了。所以永远都是4
解决方法就是用闭包
摘录2楼的代码
for(var i = 0; i<links.length; i++){
        links[i].onclick = function(i){ 
        //return showPic(this);
        return showPic(links[i]);
        }(i);
    }
最后一行，在循环的时候，传入。
然后，看里面的function
function(i){ 
        //return showPic(this);
        return showPic(links[i]);
        }
这段，因为里面的links[i],function会记录下i的值，也就是说，links[i]的i，变成了这个function的参数i，而不是最外面的i。