JavaScript基础 闭包

回收机制

一个变量或函数执行完后，下面的代码没有在使用或调用时会被回收回去，释放出内存。定义一个变量、函数会在内存占一定的空间；（全局变量、函数不会被回收）

了解函数调用

<script>
   var num = 0 ;
   function a(){
       num = 10;
       console.log(num);
   }
   function b(){
       num = 20;
       a();
   }
   b();


执行顺序：
看全局：
    1、定义 
          var num 
          函数a
          函数b
2、执行代码
          num = 0 
          b();      ==  新的作用域 
                                      1、定义没有
                                      2、执行代码
                                            num = 20
                                            a();  ==  新的作用域   
                                                              1、定义没有
                                                              2、执行代码
                                                                      num = 10;
                                                                      console.log(num);  ===>打印 10；
上面嵌套就是函数调用


  function a(){
       var num = 10;
       function b(){   //这层下可以访问 num
            num ++;
            console.log( num );
       }
   return b; 
   }
   a();
b层可以访问到num 我们可以把 b return上去
</script> 

一、 

fn();
function fn(){
    var a = 10;
    alert( a );  ===>a没有再被引用，会被回收
}                    （在下面的代码毫无作用的时候）

二、
fn();
function fn(){
    var oBox = document.getElementById( 'box' );
    oBox.onclick = function (){
        var a = oBox.id;  这里的oBox 不会被回收
    }                    
}

oBox是事件函数，没办法确定用户什么时候会去点击，所以这里oBox.id会时时存在；

另一种写法
fn();
function fn(){
    var oBox = document.getElementById( 'box' );
    oBox.onclick = function (){
        var a = this.id;  会被回收
    }                    
}

this只有当事件触发时才会指向谁，在没有点击的时候不会有指向，所以会被回收；
前提是：后面没有oBox的应用；

什么是闭包

当一个函数里嵌套了一个函数
内部函数引用了外部函数的参数或者变量
那么这个参数/变量不会被回收，这样就形成一个闭包

var b = fn();  // b {var a = 20;    return function (){ a ++;  alert( a );  }}
b();// var a = 20;    return function (){ a ++;  alert( a );  }  弹出21 
b();// a = 21;    return function (){ a ++;  alert( a );  }  弹出22
b();// a = 22;    return function (){ a ++;  alert( a );  }  弹出23
fn()(); fn()===> var a = 20;    return function (){ a ++;  alert( a );  }
                fn()()再让上面的函数执行 function (){ a ++;  alert( a );  弹出 21
function fn(){  ===>嵌套
  var a = 20; ==>不会被回收
  return function (){
    a ++;
    alert( a ); 内部引用a
  }
}

这里fn()()各b是不同的闭包，是2个闭包

闭包的应用

<div id='box'>
  <p>0</p>
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
</div>
var oBox = document.getElementById ( 'box' ),
      aP = oBox.getElementsByTagName( 'p' ),
      length = aP.length;
for( var i=0 ; i<length ; i++ ){
    aP[i].i = i;
    aP[i].onclick = function (){
        alert( this.i ); //点击哪个弹出对应的序号；
  }
}

之前用的方法

用闭包实现
for( var i=0 ; i<length ; i++ ){
    function fn( x ){   
       // 相当于 var  x ;
       aP[x].onclick = function (){  //嵌套函数
               alert( x ); //点击哪个弹出对应的序号；  ===>调用上面的变量 x 不会被回收
          }
   }
   fn(i); ==>传i进去
  }

注意：这里产生了5个闭包 

  function fn(){   
       var  x = 0 ;
       aP[0].onclick = function (){  //嵌套函数
               alert( 0 ); //点击哪个弹出对应的序号；  ===>调用上面的变量 x 不会被回收
          }
   }
   fn(0); ==>传i进去

  function fn(){   
       var  x = 1 ;
       aP[0].onclick = function (){  //嵌套函数
               alert(1 ); //点击哪个弹出对应的序号；  ===>调用上面的变量 x 不会被回收
          }
   }
   fn(1); ==>传i进去
...

一直到5

上面定义一个函数马上就执行，我们可以写成自执行的形式，可以减少一个变量名；

for( var i=0 ; i<length ; i++ ){
      (function fn( x ){   
         aP[x].onclick = function (){ alert( x ); }
      })(i);
  }

应用二、

二、
<script>
    function fn(a){
        var b = 'hello';
        return function (){
            alert( a );
            alert( b );
        }
    }
    fn(2)//得到的是; function (){alert( a );alert( b );}
    fn(2)()//再上面的函数执行 先弹2 再弹hello
也可以用变量存放起来；
 var x= fn(20);  ===>上面用了闭包 不会被回收
        x();
在其他函数体里也可以调用
function run(){
    x();
}
run()
</script>