js高级-闭包

变量作用域：全局变量和局部变量

1.函数内部可以使用全局变量

2.函数外部 不可以使用局部变量

3.当函数执行完毕，本作用域内的局部变量会销毁

什么是闭包？

闭包（closure）是有权访问另一个函数作用域中变量的函数。

简单理解就是，一个作用域可以访问另一个函数内部的局部变量。

//fun这个函数作用域 访问了另外一个函数fn里面的局部变量num
function fn(){
    var num = 10;
      function fun(){
        console.log(num);
      }
}

闭包的作用？

//我们fn外面的作用域可以访问fn内部的局部变量
function fn(){
    var num = 10;
      function fun(){
        console.log(num);
      }
    return fun;
}
var f = fn();
f();
//类似于
//var f = function fun(){
//      console.log(num);
//}

输出结果为10

主要作用：延伸了变量的作用范围。 

闭包的案例

1.点击li输出索引号

<ul class="nav">
    <li>榴莲</li>
    <li>臭豆腐</li>
    <li>鲱鱼罐头</li>
    <li>大猪蹄子</li>
</ul>

（1）利用动态添加属性的方式

<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(i);
              console.log(this.index);
    }

}
</script>

（2）利用闭包的方式得到当前的索引号

<script>
     
     for(var i=0;i<lis.length;i++){
          //利用for循环创建了4个立即执行函数
          //立即执行函数也称为小闭包，因为立即执行函数里面的任何一个函数都可以使用它的i这变量
        (function(i) {
             lis[i].onclick = function(){
                console.log(i);
             }
             
         })(i);
    }


</script>

2. 循环中的定时器  3s后打印所有li元素的内容

<script>
     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);
    }


</script>