Javascript闭包

最新推荐文章于 2024-07-09 19:02:21 发布

lgd5979

最新推荐文章于 2024-07-09 19:02:21 发布

阅读量525

点赞数

分类专栏：前端文章标签： javascript function

本文链接：https://blog.csdn.net/lgd5979/article/details/7019682

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

1、将变量 i 保存给在每个段落对象（p）上

 
    1function  init1() { 
 
    2  var pAry = document.getElementsByTagName("p");  
 
    3  for( var i=0; i<pAry.length; i++ ) { 
 
    4     pAry[i].i = i; 
 
    5     pAry[i].onclick = function() { 
 
    6        alert(this.i);  
 
    7     } 
 
    8  }  
 
    9}

2、将变量 i 保存在匿名函数自身

 
    1function  init2() { 
 
    2  var pAry = document.getElementsByTagName("p");  
 
    3  for( var i=0; i<pAry.length; i++ ) { 
 
    4   (pAry[i].onclick = function() { 
 
    5        alert(arguments.callee.i); 
 
    6    }).i = i; 
 
    7  }  
 
    8}

后又想到了三种

3、加一层闭包，i 以函数参数形式传递给内层函数

 
    01function  init3() { 
 
    02  var pAry = document.getElementsByTagName("p"); 
 
    03  for( var i=0; i<pAry.length; i++ ) { 
 
    04   (function(arg){ 
 
    05       pAry[i].onclick = function() { 
 
    06          alert(arg); 
 
    07       }; 
 
    08   })(i);//调用时参数  
 
    09  }  
 
    10}

4、加一层闭包，i 以局部变量形式传递给内层函数

 
    01function  init4() { 
 
    02  var pAry = document.getElementsByTagName("p"); 
 
    03  for( var i=0; i<pAry.length; i++ ) {  
 
    04    (function () { 
 
    05      var temp = i;//调用时局部变量  
 
    06      pAry[i].onclick = function() { 
 
    07        alert(temp); 
 
    08      } 
 
    09    })(); 
 
    10  }  
 
    11}

5、加一层闭包，返回一个函数作为响应事件（注意与3的细微区别）

 
    01function  init5() { 
 
    02  var pAry = document.getElementsByTagName("p"); 
 
    03  for( var i=0; i<pAry.length; i++ ) { 
 
    04   pAry[i].onclick = function(arg) { 
 
    05       return function() {//返回一个函数  
 
    06       alert(arg); 
 
    07     } 
 
    08   }(i); 
 
    09  }  
 
    10}

后又发现了两种

6、用Function实现，实际上每产生一个函数实例就会产生一个闭包

 
    1function  init6() { 
 
    2    var pAry = document.getElementsByTagName("p"); 
 
    3    for( var i=0; i<pAry.length; i++ ) { 
 
    4      pAry[i].onclick = new Function("alert(" + i + ");");//new一次就产生一个函数实例 
 
    5    } 
 
    6}

7、用Function实现，注意与6的区别

 
    1function  init7() { 
 
    2    var pAry = document.getElementsByTagName("p"); 
 
    3    for( var i=0; i<pAry.length; i++ ) { 
 
    4         pAry[i].onclick = Function('alert('+i+')'); 
 
    5    } 
 
    6
 }