求教作用于链引发的问题?

[vmtools12345]

下面两段代码
第一段 代码 无论点击任何按钮都是出来button4

第二段代码正常 ，点击button1 弹出 button1被点击 , 点击 button2 弹出button2被点击

问题是 能否通过作用域链的知识 帮我解释一下，尤其是第二段代码为什么这样写就ok
(我已经读过一些作用域链和闭包的知识 但是没有参透 谢谢 )

//第一段
function newLoad() {
for ( var i = 1; i < 4; i++) {
var anchor = document.getElementById("button" + i);
anchor.onclick = function () {//为anchor添加单击事件
alert ("you clicked anchor"+i);//给出点击反应
}
}
}
window.onload = newLoad;
/////////////// 第二段

function newLoad() {
[color=#FF6600]for ( var i = 1; i < 4; i++) {
var anchor = document.getElementById("button" + i);
listener(anchor,i)
}
}

function listener(anchor,i){
anchor.onclick = function(){
alert("Button"+i);
}
}
window.onload = newLoad;[/color]

下面是引用的一段解释 因为在listener中已经确定了哪个anchor单击对应哪个提示信息，所以只是在newload中查找对应的anchor而已，不会等循环完毕产生anchor4。

我感觉 第一段代码 其实也已经确定了哪个anchor单击对应哪个提示信息.为什么还是输出button4

[张运领]

首先，你要明白一点：JS只有全局作用域和局部作用域。局部作用域可以访问全局作用域。既然你已经对作用域链有所了解，那么我就在代码中，做一些注释吧。

//第一段
function newLoad() {
	//假设这里的作用域是 A 
	for ( var i = 1; i < 4; i++) {
		//因为没有块级作用域，所以这里的作用域依然是 A 
		var anchor = document.getElementById("button" + i);
		anchor.onclick = function () {
			//这里是一个局部作用域，所以这里的作用域是 B 
			//B作用域可以访问A作用域中的变量，A作用域不可用访问 B作用域中的参量
			alert ("you clicked anchor"+i);
			//在代码执行时，这里只是添加了一个事件监听，而当这个事件触发时，就会去执行这个alert的方法
			//此时，alert的 i 变量还是没有值的，并且i 在B作用域也没有进行定义和赋值，所以就会去访问B作用域的上级作用域 ，也就是A作用域，A作用域的 是有 i 这个变量的，所以就直接读取 i此时的值。
			//为什么i的值是3， 是因为绑定事件监听 和执行这个，可不是同样的意思，在你执行时，A作用域中的for循环，是已经执行完了，所以i的值，也是最后的i值了。
		} 
	}
}
window.onload = newLoad; 
///////////////	第二段 

function newLoad() {
	//A 作用域
	for ( var i = 1; i < 4; i++) {
		//A作用域
		var anchor = document.getElementById("button" + i);
			listener(anchor,i)
	}
}

function listener(anchor,i){
	//B作用域
	anchor.onclick = function(){
		//C作用域
		alert("Button"+i);
		//这里的执行，此时的i的值，同样在当前的作用域（C）是没有的，那么它就会去查询它的上一个作用域（这里是B作用域），发现此时B作用域中是有i（以形参的形式存在）变量的，就直接读取了。。。
		//为什么这里的i值是对的，因为在for循环中，传入的i的值是对的~~~
	}
}
window.onload = newLoad;

这样是否能理解到一些？

[vmtools12345]

再次感谢， 还有个问题 ，谢谢帮忙看看是否我理解正确 第2段还是有些想不通，因为感觉点击button2的时候, 为什么会是listener(anchor,2), 难道是 newLoad的时候 做了3次循环，将listner(anchor,1),listner(anchor,2) listner(anchor,3)的放入了内存，然后当触发button2的时候 就会去执行 listner(anchor,2)？

[keatkeat1987]

var i = 0; var fn = function () { alert(i); //这里的 i 是对外部的引用,就是说外面的改变了，里面的也跟着变 } i = 1; //改变 fn(); //这个时候调用函数 i 得到是 1 ，而不是 0 了. //这个函数被调用了3次 //每次的 i 都是不一样的 //所以你的 onclick 函数内所引用的 i 也是不一样的 。 function listener(anchor, i) { anchor.onclick = function () { alert("Button" + i); } }

[vmtools12345]

那我的理解就是 在onload循环的时候 已经将 listner(anchor,1),listner(anchor,2) listner(anchor,3)的放入了内存 也就是点击button2 ,onclick事件触发的时候 ，是反过来调用listner(anchor,2), 还是有些不解，为什么我选择2的时候 就是i会是2，难道它内部有张映射表?