JS 作用域对象与闭包
// 闭包
// 函数套函数 子函数调用父函数的局部变量 - 闭包
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传递进去
}