JS——坑2（函数不调用不执行，闭包）

最新推荐文章于 2024-01-31 11:54:32 发布

spfLinux

最新推荐文章于 2024-01-31 11:54:32 发布

阅读量5k

点赞数

分类专栏： js 文章标签： JS 坑循环闭包函数

js 专栏收录该内容

137 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<button>one</button>
	<button>two</button>
	<button>three</button>
	<button>four</button>

	<script>
		var btns = document.getElementsByTagName("button");
		for(var i=0;i<btns.length;i++){
			btns[i].onclick = function(){ //函数定义
				alert(i+1); //都是5！！！！！！
			}
		}
		//注：函数不调用不执行！！！！！
		//解决方案：闭包
	</script>
</body>
</html>

解决：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<button>one</button>
	<button>two</button>
	<button>three</button>
	<button>four</button>

	<script>
		var btns = document.getElementsByTagName("button");

		function find(num) {  //factory
			return function(){
				alert(num+1);
			}
		}

		for(var i=0;i<btns.length;i++){
			btns[i].onclick = find(i);
		}
	</script>
</body>
</html>

另外一个例子：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script>
		function fun(){
			for(var i=0,arr=[];i<3;i++){
				arr[i] = function(){console.log(i);} //定义函数
			}
			return arr;
		}

		var funs = fun();
		console.log(funs);
		funs[0](); //调用函数 输出3  funs[0] = function(){console.log(i);}
		funs[1](); //调用函数     3
		funs[2](); //调用函数     3
	</script>
</body>
</html>

spfLinux

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS——坑2（函数不调用不执行，闭包）

Document one two three four var btns = document.getElementsByTagName("button"); for(var i=0;i<btns.length;i++){ btns[i].onclick = function(){ //函数定义 alert(i+1); //都是5！！！！！！ }
复制链接

扫一扫