51工具盒子

依楼听风雨
笑看云卷云舒,淡观潮起潮落

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传递进去
}

赞(2)
未经允许不得转载:工具盒子 » JS 作用域对象与闭包