4月13日--闭包的发生与解决
1、闭包发生：在一个函数内部定义函数时，内部函数使用了外部函数的局部变量
闭包的解决方法1：IIFE(立即执行函数表达式immediately invoke function expression)
(function(n){
*****
})(i)
onload=function(){
var btns=document.getElementsByTagName("button");
for(var i=0;i<btns.length;i++){
(function(n){
btns[n].onclick=function(){
console.log("btn click:"+n);
};
})(i);
}
};
闭包的解决2：在外部绑定
onload = function () {
var btns = document.getElementsByTagName("button");
for(var i = 0; i < btns.length; i++){
bindClick(btns[i],i);
}
};
function bindClick (btn,index) {
btn.onclick = function () {
console.log("second btn click:"+index);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>闭包closure</title>
<script type="text/javascript">
// 闭包发生：在一个函数内部定义函数时，内部函数使用了外部函数的局部变量
//闭包的解决1：IIFE(立即执行函数表达式immediately invoke function expression)
// onload=function(){
// var btns=document.getElementsByTagName("button");
// for(var i=0;i<btns.length;i++){
// (function(n){
// btns[n].onclick=function(){
// console.log("btn click:"+n);
// };
// })(i);
// }
// };
//闭包的解决2：在外部绑定
onload = function () {
var btns = document.getElementsByTagName("button");
for(var i = 0; i < btns.length; i++){
bindClick(btns[i],i);
}
};
function bindClick (btn,index) {
btn.onclick = function () {
console.log("second btn click:"+index);
}
}
</script>
</head>
<body>
<button>btn1</button>
<button>btn2</button>
<button>btn3</button>
</body>
</html>
