JS闭包操作

<html >    

<head>    
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
<title>闭包演示</title>    
<script type="text/javascript">    
function init() {    
　　var pAry = document.getElementsByTagName("p");    
　　for( var i=0; i<pAry.length; i++ ) {    
　　　　pAry[i].onclick = function() {    
　　　　　　alert(i);    
　　　　}    
　　}    
}    
</script>    
</head>    
<body onload="init();">    
<p>产品一</p>    
<p>产品二</p>    
<p>产品三</p>    
<p>产品四</p>    
<p>产品五</p>    
</body>    
</html>

以上的代码会产生每次都输出5，而不是对应的0,1,2,3,4，如何避免这种问题出现呢？

解决方案1：将变量 i 保存给在每个段落对象（p）上

function init() {    
  var pAry = document.getElementsByTagName("p");    
  for( var i=0; i<pAry.length; i++ ) {    
     pAry[i].i = i;    
     pAry[i].onclick = function() {    
        alert(this.i);    
     }    
  }    
}

方案2：将变量 i 保存在匿名函数自身

function init2() {    
  var pAry = document.getElementsByTagName("p");    
  for( var i=0; i<pAry.length; i++ ) {      
   (pAry[i].onclick = function() {    
        alert(arguments.callee.i);    

    }).i = i;    
  }    
}

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

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

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

function init4() { 
  var pAry = document.getElementsByTagName("p"); 
  for( var i=0; i<pAry.length; i++ ) {   
    (function () { 
      var temp = i;//调用时局部变量 
      pAry[i].onclick = function() {   
        alert(temp);   
      } 
    })(); 
  } 
}

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

function init5() { 
  var pAry = document.getElementsByTagName("p"); 
  for( var i=0; i<pAry.length; i++ ) {   
   pAry[i].onclick = function(arg) { 
       return function() {//返回一个函数 
       alert(arg); 
     } 
   }(i); 
  } 
}

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

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

方案7：用Function实现，注意与6的区别

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

相关阅读:
“三本主义”引领中国式管理
 “赢”销有道
 3分钟打动客户：电话销售实战技能训练
 乌合之众文摘
 Android Log工具类
 IOC原理
 解决header,footer等HTML5标签在IE(IE6/IE7/IE8)无效的方法
 让浏览器不再显示 https 页面中的 http 请求警报<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
用meta name="renderer" content="webkit|ie-comp|ie-stand"来切换360双核安全浏览器的极速模式和兼容模式
 前端开发的正确姿势——各种文件的目录结构规划及引用
原文地址：https://www.cnblogs.com/yangzhilong/p/2891808.html