js闭包练习

 local局部作用域：

闭包的形成：

    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，回调函数
    }