js闭包详解

//js闭包
function t1(){
    var a = 20;
    function t2(){
        alert(a)
    }
    return t2
}
a = 1
var tmp = t1()
tmp() //20
/*
在大部分的语言中,t1被调用执行，则申请内存，并把其局部变量push入栈,t1函数执行完毕，内部变量随着函数退出而销毁，
因此var age=20的局部变量也会被销毁，
【但是】，在js中，t1执行过程中,又生成了t2,而从作用域上来说,t2能访问到var age=20,于是var age=20没有消失，而是与返回的t1函数加上它周围的环境
形成了一个“环境包”,开辟了一个新内存保存了它,这个包只属于t2,别人访问不了，所以叫闭包（一句话：函数的作用于取决于它声明时候，不取决于调用时候）
*/

//例子1，多人开发共用一个计数器
window.cnt = 0
//调用
++ window.cont
//但是引入多人的js程序,别人程序里也有一个window.cnt = 'hello',该计数器就会报错了(所以尽量避免使用全局变量)


//例子2，闭包计数器，维护一个别人污染不到的变量，做计数器
function counter(){
    var cnt = 0;
    var cnter = function (){
        return ++cnt;
    }
    return cnter;
}
var inc = counter(); //当调用counter()执行完毕后，返回内部一个“闭包环境”赋值给了inc，除了cnter谁也别想碰到闭包环境中的cnt
console.log(inc())//1
console.log(inc())//2
console.log(inc())//3


//例子3，利用匿名函数简化例子2
var cnt = (function(){
    var cnt = 0
    return function(){
        return ++cnt;
    }
})();
console.log(inc())//1
console.log(inc())//2
console.log(inc())//3


//例子4，工作中如何避免全局污染或者冲突
//4.1 统一放在一个全局对象上，如jquery->$
$ = {}; //如果引用了jquery就不需要定义了，这里模拟引入jquery
$.cnt =  (function(){
    var cnt = 0
    return function(){
        return ++cnt;
    }
})();
console.log($.cnt())
console.log($.cnt())
console.log($.cnt())
//4.2 每人用自己的命名空间
var lxj = {} //定义团队每个人的命名空间
lxj.cnt = (function(){
    var cnt = 0
    return function(){
        return ++cnt;
    }
})();


//例子5，js循环动态给dom绑定事件，如果
var lis = document.getElementsByTagName('li');i
for(var i=0;i < lis.length;i++){
    lis[i].onclick = function(){
        console.log(i) //全部都是一个值
    }
}
//利用闭包解决全部都是一个值的问题
var lis = document.getElementsByTagName('li');
for(var i=0;i < lis.length;i++){
    lis[i].onclick = (function(){
        var index = i;
        return function(){ console.log(index)}
    })()
}