转行前端（JS篇8）：闭包作用之保存

var oTab = document.getElementById('tab');
var tabList =oTab.getElementByTagName('li');
var divList=oTab.getElementByTagName('div')
function changeTab(curIndex){
for(var i=0;i<tabList.length;i++){
	tabList[i].className=divList[i].className='';
}

tabList[curIndex].className='active';
divList[curIndex].className="active";
for(var i=0;i<tabList.length;i++){
	tabList[i].onclick=function(){
    	changeTab(i);
        //=>执行方法，形成一个私有的栈内存，遇到变量i，i不是私有变量，向上一级作用域查找（上级作用域是window）
        //=>当我们点击的时候，外层循环已经结束(能点击的时候页面已经加载完成，页面加载完成预示js代码都已经执行完成，也就是循环也都执行完成了)，外层循环结束已经让全局下的I=li的总长度=3
        //=>所有的事件绑定都是异步编程（同步编程：一件事一件事的做。当前没完成，下一个任务不能处理/异步编程：当前这件事情没有彻底完成，不在等待，继续执行下面的任务），绑定事件后，不需要等待执行，继续执行下一个任务，所以当我们点击执行方法的时候，循环早已结束（让全局的I等于循环最后的结果3）
    }
}  

解决方案：自定义属性
for(var i = 0 ;i <tabList.length;i++){
	tabList[i].myIndex=i;
    tabList[i].onclick=function(){
    	changeTab(this.myIndex);
        //this:给当前元素的某个事件绑定方法，当事件触发，方法执行的时候，方法中的this是当前操作的元素对象
    }
}

解决方案：闭包
for(var i=0;i<tabList.length;i++){
  tabList[i].onclick=（function(n){
  
  	//=>让自执行函数执行，把执行的返回值return赋值给onclick
    return function（）{
    	var i=n;
    	changeTab(i)=>上级作用域：自执行函数形成的作用域
    }
  })(i);
}
总结:循环三次，形成三个不销毁的私有作用域，（自执行函数执行），而每一个不销毁的栈内存都存储一个私有变量，而这个值分别是每一次执行传递进来的全局的值（就是：第一个不销毁的作用域存储的是0，第二个是1，第三个是2；当点击的时候，执行返回的小函数，遇到变量I,向他自己的上级作用域查找，找到的I值分别是0/1/2，达到了需要的效果 ）

解决方案：基于es6解决
for(let i=0;i<tabList;i++){
	tabList[i].onclick=function(){
    	changeTab(i);
    }
}

基于es6中的let来创建变量，是存在块级作用域的（类似于私有作用域）
作用域（栈内存）
1、全局作用域
2、私有作用域（函数执行
3、块级作用域（一般用大括号包起来的都是块级作用域，前提是es6的语法规范）===>比如if/for

{
let a=12
console.log(12)//=>12
}
console.log(12)//error:a is not defined

if(1===1){
//=>判断体也是块级作用域
let a=12;
}
console.log(a)//error:a is not defined

for(let i=0;i<5;i++){
//循环体也是块级作用域，初始值设置的变量是当前本次块级作用域中的变量（形成5个块级作用域，每个块级作用域中都有一个私有变量，变量值是每一次循环i的值）
}
console.log(i)//error:i is not defined


var obj={}//==>对象的大括号不是块级作用域
for while if else...