理解JavaScript闭包

代码

   
     

    
      
    
      <
    
      ul
    
      >
    
      
 
    
      <
    
      li
    
      >
    
      1111
    
      <
    
      /
    
      li>
    
      

    
       
    
      <
    
      li
    
      >
    
      2222
    
      <
    
      /
    
      li>
    
      

    
       
    
      <
    
      li
    
      >
    
      3333
    
      <
    
      /
    
      li>
    
      

    
      <
    
      /
    
      ul>
    
      

    
      <
    
      script
    
      >
    
      
 
    
      var
    
       a
    
      =
    
      document.getElementsByTagName(
    
      '
    
      li
    
      '
    
      );
 
    
      for
    
      (
    
      var
    
       i
    
      =
    
      0
    
      ,l
    
      =
    
      a.length;i
    
      <
    
      l;i
    
      ++
    
      ){
 a[i].onclick
    
      =
    
      function
    
      (){
 alert(i)
 }
 }

    
      <
    
      /
    
      script>
   
     

一个最经典的例子,上面的代码无论点击哪个结果都为最后的值,因为click事件接收的函数形成了一个闭包,闭包里的i只是对外部函数中变量i的引用,当fn执行完毕时变量i是循环得出的最后的值,闭包内的变量i也就是这个值了,所以不会依次弹出1,2.3.

至于解决的方法:

1)为遍历的每个元素添加自定义属性用来保存当前的索引值.

  
    

   
     
   
     function
   
      fn() {
 
   
     var
   
      a 
   
     =
   
      document.getElementsByTagName(
   
     "li
   
      
   
     "
   
     );
 
   
     for
   
     ( 
   
     var
   
      i
   
     =
   
     0
   
     ; i
   
     <
   
     a.length; i
   
     ++
   
      ) {
 a[i].i 
   
     =
   
      i;
 a[i].onclick 
   
     =
   
      
   
     function
   
     () {
 alert(
   
     this
   
     .i);
 }
 }
}
  
    

 

2)将当前索引值保存到匿名函数自身.

  
    

   
     
   
     function
   
      fn() {
 
   
     var
   
      a 
   
     =
   
      document.getElementsByTagName(
   
     "
   
     li
   
     "
   
     );
 
   
     for
   
     ( 
   
     var
   
      i
   
     =
   
     0
   
     ; i
   
     <
   
     a.length; i
   
     ++
   
      ) {
 (a[i].onclick 
   
     =
   
      
   
     function
   
     () {
 alert(arguments.callee.i);
 }).i 
   
     =
   
      i;
 }
}
  
    

 

3)加一层闭包,将当前索引值以函数参数形式传递到内部函数.

  
    

   
     
   
     function
   
      fn() {
 
   
     var
   
      a 
   
     =
   
      document.getElementsByTagName(
   
     "
   
     li
   
     "
   
     );
 
   
     for
   
     ( 
   
     var
   
      i
   
     =
   
     0
   
     ; i
   
     <
   
     a.length; i
   
     ++
   
      ) {
 (
   
     function
   
     (arg){
 a[i].onclick 
   
     =
   
      
   
     function
   
     () {
 alert(arg);
 };
 })(i);
   
     //
   
     调用时参数
   
     

   
      }
}
  
    

 

4)加一层闭包,将当前索引值以变量形式传递到内不函数.

代码

   
     

    
      
    
      function
    
       fn() {
 
    
      var
    
       a
    
      =
    
       document.getElementsByTagName(
    
      "
    
      li
    
      "
    
      );
 
    
      for
    
      ( 
    
      var
    
       i
    
      =
    
      0
    
      ; i
    
      <
    
      a.length; i
    
      ++
    
       ) {
 (
    
      function
    
       () {
 
    
      var
    
       index 
    
      =
    
       i;
    
      //
    
      调用时局部变量
    
      

    
       a[i].onclick 
    
      =
    
       
    
      function
    
      () {
 alert(index);
 }
 })();
 }
}
   
     

 

5)加一层闭包,返回一个函数作为响应事件.

代码

   
     

    
      
    
      function
    
       fn() {
 
    
      var
    
       a 
    
      =
    
       document.getElementsByTagName(
    
      "
    
      li
    
      "
    
      );
 
    
      for
    
      ( 
    
      var
    
       i
    
      =
    
      0
    
      ; i
    
      <
    
      a.length; i
    
      ++
    
       ) {
 a[i].onclick 
    
      =
    
       
    
      function
    
      (arg) {
 
    
      return
    
       
    
      function
    
      () {
    
      //
    
      返回一个函数
    
      

    
       alert(arg);
 }
 }(i);
 }
}
   
     

 

6)利用Function对象,需要注意的是Function构造函数是在脚本运行时创建函数并将参数用作新函数的参数,所以相对前几种方法执行效率较低.

  
    

   
     
   
     function
   
      fn() {
 
   
     var
   
      a 
   
     =
   
      document.getElementsByTagName(
   
     "
   
     li
   
     "
   
     );
 
   
     for
   
     ( 
   
     var
   
      i
   
     =
   
     0
   
     ; i
   
     <
   
     a.length; i
   
     ++
   
      ) {
 a[i].onclick 
   
     =
   
      Function(
   
     '
   
     alert(
   
     '
   
     +
   
     i
   
     +
   
     '
   
     )
   
     '
   
     )
 }
}
  
    

 

7)利用Function对象实例来产生闭包.

  
    

   
     
   
     function
   
      fn() {
 
   
     var
   
      a
   
     =
   
      document.getElementsByTagName(
   
     "
   
     li
   
     "
   
     );
 
   
     for
   
     ( 
   
     var
   
      i
   
     =
   
     0
   
     ; i
   
     <
   
     a.length; i
   
     ++
   
      ) {
 a[i].onclick 
   
     =
   
      
   
     new
   
      Function(
   
     '
   
     alert('
   
      
   
     +
   
     i
   
     +'
   
      
   
     )'
   
      
   
     );
   
     //
   
     new一次就产生一个函数实例
   
     

   
      }
}