js闭包练习

js闭包练习

 

 

 local局部作用域:

js闭包练习

 

 

闭包的形成:

    function outer (){
        var num =10;
        function inner(){
            console.log(num)
        }
        inner()
    }
  outer()

闭包的保持

function outer (){
    var num =10;
    function inner(){
        console.log(num)
    }
    return inner
}
var f = fn();//接受了inner内部函数。
fn();//f访问了内部的函数

也可以这样写。

    function fn(){
        var num = 10;
        return function (){        //返回的函数 也是高阶函数。
            console.log(num)
        }
    }
    var f = fn();
    f();

 

 闭包的作用:延伸了作用域的范围。

 

5闭包案例:

1循环注册点击事件:

 

<ul class="nav">
    <li>草莓</li>
    <li>苹果</li>
    <li>榴莲</li>
    <li>橘子</li>
</ul>

<script>
    var lis = document.querySelector('.nav').querySelectorAll('li');
    for (var i = 0; i < lis.length; i++){
        lis[i].index = i
        lis[i].onclick = function () {
            console.log(this.index);
        }
    }

    for (var i = 0; i < lis.length; i++) {
        (function(i){//()()立即执行函数。第二个()相当于直接执行函数。立即函数,也成为了小闭包。都可以使用i的变量。
            console.log(i);
            lis[i].onclick = function(){
                console.log(i);
            }
        })(i);
    }
</script>

 

案例2: 3秒后,打印所有的li的元素内容。

    // var lis  = document.querySelector('.nav').querySelectorAll('li');
    // for (var i = 0; i<lis.length;i++){
    //     setTimeout(function(){
    //         console.log(lis[i].innerHTML);
    //     },0);
    //     //定时器,事件onclick ,ajax,回调函数
    // }
    var lis  = document.querySelector('.nav').querySelectorAll('li');
    for (var i = 0; i<lis.length;i++){
        (function (i){
            setTimeout(function(){
                console.log(lis[i].innerHTML);
            },3000)
        })(i);
        //定时器,事件onclick ,ajax,回调函数
    }

 

上一篇:前端必学----tab切换


下一篇:求解最长递增子序列(LIS) | 动态规划(DP)+ 二分法