JavaScript中闭包结合for循环的使用

阅读() @2019-03-17 16:05:12

了解JavaScript的同学肯定都遇到过闭包,我在之前的博客中也提到很多次闭包,但是闭包的使用场景有很多,比如今天我说的闭包结合for循环使用,这里边就会有很多小细节需要注意,否则很容易出错。

代码如下:

var arry = [];
function f1(){
	for(var i=0; i<4; i++){
		arry[i] = function(){
			return i;
		}
	}
	return arry;
}
alert(f1()[0]());

运行最后的结果是4.

很多人最开始看这个问题的时候,认为结果肯定是一个数组,然后数组的值是0,1,2,3。

下面解释下原因:

第一步:由于这个闭包的关系,他是循环完毕之后才返回,最终结果是3++是4;

第二步:这个匿名函数里面根本没有i这个变量,所以匿名函数会从父级函数中去找i;

第三步:当找到这个i的时候,for循环已经循环完毕了,所以最终会返回4。

还有很多类似的这种问题,比如以下代码:

html部分:

<p>第一个p</p>
<p>第二个p</p>
<p>第三个p</p>
<p>第四个p</p>
<p>第五个p</p>

JavaScript部分:

var oP = document.getElementsByTagName('p');
f2();
function f2(){
	for(var i=0; i<oP.length; i++){
		oP[i].onclick = function(){
			alert(i);
		}
	}
}

这个时候你会发现,无论点击那个p标签,最后弹出的结果都是5,原因就是上面提到的三个原因。

那么我们如何才能让它输出我们想要的结果呢?比如点击哪个p标签,就弹出它对应的索引值:0,1,2,3,4,修改后的JavaScript代码如下:

var oP = document.getElementsByTagName('p');
f2();
function f2(){
	for(var i=0; i<oP.length; i++){
		oP[i].index = i;
		oP[i].onclick = function(){
			var i = this.index;
			alert(i);
		}
	}
}

完!

微信二维码