花开陌上

// 闭包 

// 函数套函数 子函数调用父函数的局部变量 - 闭包

function fn(){
    var a = 5;
    function fn2(){
        console.log(a);
    }

    fn2();
}

fn();

闭包能做什么

示例：点击不同的按钮打印不同的下标

<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>

<script>
    var btns = document.querySelectorAll('button');
		
    for(var i = 0;i<btns.length;i++){
        // 按选项卡那的思路的话，给个自定义属性把下标存起来，
        btns[i].index = i;
        btns[i].onclick = function(){
            console.log(this.index);
        }
    }
</script>

优化一：
循环过程中，可以把里面的代码封装成函数，然后循环里调用

for(var i = 0;i<btns.length;i++){
    tab();
}
// 这样写没太大区别，只是把它放外面了
function tab(){
    btns[i].index = i;
    btns[i].onclick = function(){
        console.log(this.index);
    }
}

如果不用声明自定义属性btns[i].index = i;存标签上了，而是用形参把它传进去

for(var i = 0;i<btns.length;i++){
    // 把i传进去
    tab(i);
}
// 然后tab这接收一个值，接收的这个值就是每次调用是i的值
function tab(index){
    // 这样就可以直接在这调用index
    btns[index].onclick = function(){
        // 这就直接使用index
        console.log(index);
    }
}

以上写法也是没问题的，上面index可以直接用的原因

// 因为这段代码里就有闭包的概念
// 函数套函数，
// function tab(index) 套 function(){}
// 子函数调用父函数的局部变量，就称之为闭包
// console.log(index) 里的 index 是调用的 function tab(index) 里的 index（局部变量）

// 如何实现i值的利用的（帮助解决掉局部的属性，下标的存储，不存储下标了也管用）

// 首先这里的循环的作用就是将里面的代码执行3次而已
for(var i = 0;i<btns.length;i++){
    tab(i);
}

// 言外之意就是这个函数体tab(i)有三个,并且会立即执行

// 闭包作用 可以存储局部变量值
function tab(index){
    btns[index].onclick = function(){
        console.log(index);
    }
}

// 解析循环过程
// tab(i)，参数里定义了i，循环过程就相当于每次把i传入不同的函数里 


(function tab(index){ // 2. 参数传入后，这个index就代表0
    // 3. 这时这个局部变量在这个函数里就相当于写了个变量声明
    // var index = 0; 这时值就给固定死了

    // btns[index]就等于btns[0]
    btns[0].onclick = function(){
        console.log(0); // 局部函数调用父级作用域下的局部变量（var index = 0;）
    }
})(0) // 1. 第一次传入了0

(function tab(index){
    // var index = 1; 
    btns[index].onclick = function(){
        console.log(index);
    }
})(1) // 第二次传入了1

(function tab(index){
    // var index = 2; 
    btns[index].onclick = function(){
        console.log(index);
    }
})(2) // 第三次传入了2

// 类似选项卡就可以用这种方法去实现
for(var i = 0;i<btns.length;i++){
    tab(i);
}

// 闭包作用 可以存储局部变量值
function tab(index){
    btns[index].onclick = function(){
        console.log(index);
    }
}

// 简化
// tab(i)无非就是function tab(index){...}的自执行
// 去掉命名，简写成匿名函数，让它自执行
for(var i = 0;i<btns.length;i++){
    (function(index){
        btns[index].onclick = function(){
            console.log(index);
        }
    })(i) //这就把i传递进去
}