js闭包
项目中用到了在for循环内部对按钮绑定事件，但运行时事件触发始终显示的是最后一次绑定的结果，思来想去，跟js闭包有关，加以记录。
js中分：全局变量 和 局部变量
全局变量：可以在任意位置访问的量就叫全局变量
1 var age = 20;
2 function a(){
3 console.log(age); >>20
4 }
5 a();
局部变量：函数中用var定义的变量，只能在函数中访问这个变量，函数外部访问不了。
1 function a(){
2 var age = 20;
3 }
4 a();
5 console.log(age); >> Uncaught ReferenceError: age is not defined
注意点1：在函数中如果不使用var定义变量那么js引擎会自动添加成全局变量。
注意点2：全局变量从创建的那一刻起就会一直保存在内存中，除非你关闭这个页面，局部变量当函数运行完以后就会销毁这个变量，假如有多次调用这个函数它下一次调用的时候又会重新创建那个变量，既运行完就销毁，回到最初的状态，简单来说局部变量是一次性的，用完就扔，下次要我再重新创建。
函数的相关知识点：
1. 一个函数内可以嵌套多个函数
2. 函数里面的子函数可以访问它上级定义的变量，注意不只是一级，如果上级没有会继续往上级找，直到找到为止，如果找到全局变量到找不到就会报错。
1 function a(){
2 var name = "追梦子";
3 function b(){
4 console.log(name); >> "追梦子"
5 }
6 b();
7 }
8 a();
3. 函数的另外一种调用形式，你可以把它叫做自调用，自己调用自己，达到自执行的效果。
1 var a = 0;
2 (function(){
3 console.log(++a); >>1
4 })()
这种方式用()把内容包裹起来，后面的（）表示执行这个函数，可能你会问为什么要把函数包起来，如果不包裹起来，js会把它当作函数声明来处理，如果包裹起来就是表达式，还没有看懂就上网查吧。
开始我们正式闭包部分---------------------------- 币包 ---------------像钱包一样的东西，可以把东西包裹起来----------
首先我们来看看为什么需要学习闭包，加以理解 -- 0 v 0- -
1 function a(){
2 var num = 0;
3 console.log(++num);
4 }
5 a(); >>1
6 a(); >>1
上面代码输出了两次1，为什么呢？如果你有看我上面的关于变量部分肯定能够想到个大概。
前面我们说过了函数执行完以后，里面的变量（即局部变量）就会销毁，下一次运行又会重新创建那个变量，所以虽然你第一次++num了但是这个变量在第一次执行完毕以后就被销毁了。
那么我们怎么样才能确保第一次的变量不被销毁，那么就需要我们的闭包出场了。
温馨提示：JavaScript中有回收机制，函数没有被引用执行完以后这个函数的作用域就会被销毁，如果一个函数被其他变量引用，这个函数的作用域将不会被销毁，（简单来说就是函数里面的变量会被保存下来，你可以理解成全局变量。）如果两个变量相互引用，但二者不被除他们之外的第三方引用，则二者都会被回收
…………………………………………………………………………………… 当 当 当 ................. 下面有请我们的币包同志
function a(){
var aa = 0;
function b(){
aa ++;
console.log(aa);
}
return b;
}
var ab = a();
ab(); //1
ab(); //2
看到了吧里面的变量的值没有被销毁，因为函数a被外部的变量ab引用，所以变量aa没有被回收。
如果某个函数被它的父函数之外的一个变量引用，就形成了一个闭包
还有一种更为常用的闭包写法
var bi = (function(){
var a = 0;
function b(){
a ++;
console.log(a);
}
return b;
})();
bi(); //1
bi(); //2
bi(); //3
执行过程分析：
首先把一个自执行函数赋值给了bi，这个自执行函数运行完成以后就bi的值就变成了
function b(){
a ++;
console.log(a);
}
因为我们在上面的代码return回去了b，然后因为这个自执行函数被bi引用所以里面的变量a并没有因为这个自执行函数执完而销毁，而是保存到了内存中，所以我们多次打印bi（）就成了1、2、3
下面我来说一个闭包的使用场景吧。
没有使用闭包的版本
window.onload = function(){
var ul = document.getElementsByTagName("ul")[0];
var li = ul.getElementsByTagName("li");
for(var i=0;i<li.length;i++){
li[i].onclick = function(){
console.log(i); //不管我怎么点都是返回6
}
}
}
使用了闭包的版本
window.onload = function(){
var ul = document.getElementsByTagName("ul")[0];
var li = ul.getElementsByTagName("li");
for(var i=0;i<li.length;i++){
(function(i){
li[i].onclick = function(){
console.log(i); //点击第几个返回第几个
}
})(i)
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button>1</button>
<button>2</button>
<button>3</button>
<script>
//方法一：
var btn=document.getElementsByTagName("button");
for(var i=0;i<btn.length;i++){
btn[i].onclick=(function(){
var temp=i;
return function(){
alert(temp);
}
}(i))
}
//方法二:
for(var i=0;i<btn.length;i++){
btn[i].onclick=(function(){
return function(i){
alert(i);
}
}(i))//这里的i是立即调用传入的参数，即和循环时的i值相同
}
</script>
</body>
</html>
