<!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>