首页 > 代码库 > js闭包的使用

js闭包的使用

2024-07-06 08:24:17   221人阅读

  1 <!doctype html>
  2 <html>
  3    <head>
  4    <title>闭包</title>
  5    <meta charset=uft-8>
  6    </head>
  7      <body>
  8           <script>
  9               function call(a, b, c){
 10             
 11                   return function(){
 12                          alert(b + c);
 13                      };
 14               }
 15               
 16             // var fun = call(1,2,3);
 17               
 18             //alert(call);
 19             //call = null;
 20             //alert(call);
 21               
 22             // alert(fun()());
 23              main = setTimeout(fun(1,2,3), 1000);
 24             // alert(main)
 25             
 26             //闭包的好处1： 保存变量，变量长期保存在内存中
 27             //闭包的好处2： 减少全部变量的污染
 28             //闭包的好处3： 私有成员的存在
 29             
 30             //闭包的用法1： 代码模块化
 31             var aaa = (function(){
 32                   
 33                   var a = 1;
 34                   
 35                   function bbb(){
 36                      a++;
 37                      alert(a);
 38                   }
 39                   
 40                   function ccc(){
 41                      a++;
 42                      alert(a);
 43                   }
 44                   
 45                   return {
 46                       b: bbb,
 47                       c: ccc
 48                   }                  
 49                   
 50             })();
 51                         
 52             
 53             //闭包的用法2： 在循环中直接找到对应元素的索引            
 54              window.onload = function(){
 55                 aLi = document.getElementsByTagName(‘li‘);
 56                 
 57                 for(var i=0; i< aLi.length; i++){
 58                    
 59                      //解决方案1
 60                      //(function(i){
 61                      //     aLi[i].onclick = function(){
 62                      //      alert(i);
 63                      //  }
 64                      //})(i);
 65                     
 66                     //解决方案2
 67                     aLi[i].onclick = (function(i){
 68                          return function (){
 69                              alert(i);
 70                          }
 71                     })(i);
 72                 }
 73              }
 74              
 75              //使用闭包需要注意的地方: IE中容易发生内存泄露的问题，在IE中外部属性和内部对象交叉引用时容易发生内存泄露
 76              window.onload = function(){
 77                  var oDiv = document.getElementById(‘oDiv‘);                 
 78                  oDiv.onclick = function(){
 79                      alert(oDiv.id);
 80                  }
 81              }
 82              
 83               //解决方案1
 84               window.onunload = function(){
 85                  oDiv.onclick = null;
 86               }
 87             
 88             
 89               //解决方案2
 90               //window.onload = function(){
 91               //   var oDiv = document.getElementById("oDiv");
 92                  
 93                  //在外部设置一个变量
 94               // var id = oDiv.id;
 95                  
 96               // oDiv.onclick = function(){
 97               //alert(id);
 98               //     }
 99                  
100                  //还要将oDiv 设置成 null
101              //     oDiv = null;
102                  
103              //  }
104           </script>
105           
106                <ul>
107                  <li>111111111111111111111</li>
108                  <li>111111111111111111111</li>
109                  <li>111111111111111111111</li>
110              </ul>
111      </body>
112 </html>

 


联系
我们