闭包

闭包

什么是闭包

闭包就是一个函数，两个函数彼此嵌套，内部函数就是闭包 形成闭包条件是内部函数需要通过return给返回出来.

<script type="text/javascript">
        function f1() {
            var name="tom";
            var age=18;
            function f2() {
                console.log("名字:"+name+"--身高:"+age);
            }
            return f2;
        }
        var ff=f1();//ff就是一个闭包,其和f2共同指向同一个function
        ff();
</script>

解释:

f1()调用完成后，垃圾回收器会回收name和age，但是因为ff又去指向function，这样function内部的age和name仍然存在，并且与外部变量无关

闭包使用规则

同一个闭包机制可以创建多个闭包函数出来，它们彼此没有联系，都是独立的。 并且每个闭包可以保存自己个性化的信息。

<script type="text/javascript">
    function f1(){
        var name="tom";
        var age=18;
        function f2(){
            console.log("名字："+name+",年龄:"+age);
        }
        return f2;
    }
    var ff1=f1();
    var ff2=f2()
    var ff3=f3();
</script>

闭包案例

闭包生成数组元素

<script type="text/javascript">
        var arr=new Array();
       for(var i=0;i<4;i++){
           arr[i]=function () {
               console.log(i);
               return i;
           }
       }
        arr[2]();  //4
        arr[1]();  //4
        arr[0]();  //4
        arr[3]();  //4
</script>

使用闭包

<script type="text/javascript">
        var arr=new Array();
       for(var i=0;i<4;i++){
           arr[i]=f1(i);
       }
       function f1(n) {
           function f2() {
               console.log(n)
           }
           return f2;
       }
        arr[0]();  //0
        arr[1]();  //1
        arr[2]();  //2
        arr[3]();  //3
</script>

闭包事件操作

<script type="text/javascript">
      window.onload=function () {
          var cars=document.getElementsByTagName('li');
          //可以利用闭包给每个元素设置独立的函数处理
          //并且函数内部也有独特的下标信息供访问
            for(var i=0;i<3;i++){
                cars[i].onmouseover=over(i);
                cars[i].onmouseout=out(i);
            }
          var col=['red','green','blue'];
          function over(n) {
              function f2() {
                  cars[n].style.backgroundColor=col[n];
              }
              return f2;
          }
          function out(n) {
              function f2() {
                  cars[n].style.backgroundColor="";
              }
              return f2;
          }
      }
</script>