JavaScript中循环给元素添加onclick事件局部变量的值均相同的怪异现象

领域专家: C/C++技术领域

2016-09-02 10:19:57

请参考如下代码，为何任意点击任意一个span弹出的都是2？



<!doctype html>



<html>

	<head>

	</head>

	<body>

	<div id="testDiv">

		<span>lvlv0</span>

		<span>lvlv1</span>

	</div>

	</body>

</html>

<script>

function closure(){

	var localVar=1;

	var div=document.getElementById("testDiv");

	var spanArray=div.getElementsByTagName("span");

	for(var i=0;i<spanArray.length;++i){

		spanArray[i].onclick=function(){

			var nestedLocalVar=i;

			alert(nestedLocalVar);

		};

	}

	//alert(nestedLocalVar);

}

closure();

</script>

我知道这个存在闭包和作用域链的问题，但是如果因作用域链的话，但是nestedLocalVar是事件函数中的局部变量，为何还是指向了最终的变量i呢？

...全文

442 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

jio可 2016-09-02

打赏
举报

点击的时候循环已经执行完了,但最后还要去执行i++ ，i就等于2了,你点击的时候用的还是上面个声明的i,它已经是2了。

逝_去_的_光_阴 2016-09-02

打赏
举报

引用 5 楼 K346K346 的回复:

嗯嗯，知道这两个解决办法，但是出现上面的问题的原因是什么呢？

var nestedLocalVar=i;因为你的i一直在变

恋喵大鲤鱼 2016-09-02

打赏
举报

引用楼主 K346K346 的回复:

请参考如下代码，为何任意点击任意一个span弹出的都是2？
<!doctype html>

<html>
	<head>
	</head>
	<body>
	<div id="testDiv">
		<span>lvlv0</span>
		<span>lvlv1</span>
	</div>
	</body>
</html>
<script>
function closure(){
	var localVar=1;
	var div=document.getElementById("testDiv");
	var spanArray=div.getElementsByTagName("span");
	for(var i=0;i<spanArray.length;++i){
		spanArray[i].onclick=function(){
			var nestedLocalVar=i;
			alert(nestedLocalVar);
		};
	}
	//alert(nestedLocalVar);
}
closure();
</script>
我知道这个存在闭包和作用域链的问题，但是如果因作用域链的话，但是nestedLocalVar是事件函数中的局部变量，为何还是指向了最终的变量i呢？

嗯嗯，知道这两个解决办法，但是出现上面的问题的原因是什么呢？

恋喵大鲤鱼 2016-09-02

打赏
举报

引用楼主 K346K346 的回复:

请参考如下代码，为何任意点击任意一个span弹出的都是2？
<!doctype html>

<html>
	<head>
	</head>
	<body>
	<div id="testDiv">
		<span>lvlv0</span>
		<span>lvlv1</span>
	</div>
	</body>
</html>
<script>
function closure(){
	var localVar=1;
	var div=document.getElementById("testDiv");
	var spanArray=div.getElementsByTagName("span");
	for(var i=0;i<spanArray.length;++i){
		spanArray[i].onclick=function(){
			var nestedLocalVar=i;
			alert(nestedLocalVar);
		};
	}
	//alert(nestedLocalVar);
}
closure();
</script>
我知道这个存在闭包和作用域链的问题，但是如果因作用域链的话，但是nestedLocalVar是事件函数中的局部变量，为何还是指向了最终的变量i呢？

｛在事件响应的时候，已经指向了循环的最后值｝，为什么会指向循环变量 i 的最后值呢？

逝_去_的_光_阴 2016-09-02

打赏
举报

纯js就用匿名闭包函数，特点定义完立即执行


function closure(){
    var localVar=1;
    var div=document.getElementById("testDiv");
    var spanArray=div.getElementsByTagName("span");
    for(var i=0;i<spanArray.length;++i){
    	(function (x) {
    		spanArray[x].onclick = function () { 
    		alert(x);
    		}
    	})(i);
    }
    //alert(nestedLocalVar);
}
closure();

斯洛文尼亚旅游 2016-09-02

打赏
举报


    for (var i = 0; i < spanArray.length; ++i) {
        spanArray[i].onclick = (function (i) {
            return function () { alert(i); }
        })(i);
    }

人生难得一只鸡 2016-09-02

打赏
举报

在事件响应的时候，已经指向了循环的最后值你可以闭包实现，或者简单的循环时赋给span的一个属性上，点击时调取对象的属性值

恋喵大鲤鱼 2016-09-02

打赏
举报

引用 5 楼 K346K346 的回复:

[quote=引用楼主 K346K346 的回复:] 请参考如下代码，为何任意点击任意一个span弹出的都是2？
<!doctype html>

<html>
	<head>
	</head>
	<body>
	<div id="testDiv">
		<span>lvlv0</span>
		<span>lvlv1</span>
	</div>
	</body>
</html>
<script>
function closure(){
	var localVar=1;
	var div=document.getElementById("testDiv");
	var spanArray=div.getElementsByTagName("span");
	for(var i=0;i<spanArray.length;++i){
		spanArray[i].onclick=function(){
			var nestedLocalVar=i;
			alert(nestedLocalVar);
		};
	}
	//alert(nestedLocalVar);
}
closure();
</script>
我知道这个存在闭包和作用域链的问题，但是如果因作用域链的话，但是nestedLocalVar是事件函数中的局部变量，为何还是指向了最终的变量i呢？

嗯嗯，知道这两个解决办法，但是出现上面的问题的原因是什么呢？[/quote]我想问的是为什么nestedLocalVar指向 i 呢？

本文系统梳理2026年前端核心面试考点，涵盖HTML5/CSS3新特性、CSS布局与盒模型、JS基础（闭包/作用域链/深浅拷贝/事件循环）、ES6+特性、Vue2/Vue3响应式原理与生命周期、组件通信、路由与Vuex、React虚拟DOM与Hooks、WebSocket、UniApp跨平台机制、小程序双线程架构，以及AI时代前端新命题：流式渲染、上下文管理、AI代码副作用规避与状态机设计。

本文总结了JavaScript编程中常见的陷阱，如大小写敏感、引号匹配、条件语句误用等问题，并提供了相应的解决办法。

还在被 CAD 文字乱码、显示问号、字体缺失困扰？这份完整解决方案，绝大多数问题都能搞定，速收，欢迎下载！

1.版本：matlab2014a/2019b/2024b 2.附赠案例数据可直接运行。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

SourceInsight-4.00.0121