js for循环闭包解决循环变量i遍历值

js for循环闭包解决循环变量i遍历值
如下的html，为什么每次输出都是5，而不是点击每个p，就alert出对应的1，2，3，4，5。
[html]
1. <html >
2. <head>
3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4. <title>闭包演示</title>
5. <script type="text/javascript">
7. function init() {
8. var pAry = document.getElementsByTagName("p");
9. for( var i=0; i<pAry.length; i++ ) {
10. pAry[i].onclick = function() {
11. alert(i);
12. }
13. }
14. }
15. </script>
16. </head>
17. <body onload="init();">
18. 产品一
19. 产品二
20. 产品三
21. 产品四
22. 产品五
23. </body>
24. </html>
解决方式有两种，

1、将变量 i 保存给在每个段落对象（p）上
[javascript]
1. function init() {
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 保存在匿名函数自身
[javascript]
1. function 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种

3、加一层闭包，i以函数参数形式传递给内层函数
[javascript]
1. function init3() {
2. var pAry = document.getElementsByTagName("p");
3. for( var i=0; i<pAry.length; i++ ) {
4. (function(arg){
5. pAry[i].onclick = function() {
6. alert(arg);
7. };
8. })(i);//调用时参数
9. }
10. }
4、加一层闭包，i以局部变量形式传递给内存函数
[javascript]
1. function init4() {
2. var pAry = document.getElementsByTagName("p");
3. for( var i=0; i<pAry.length; i++ ) {
4. (function () {
5. var temp = i;//调用时局部变量
6. pAry[i].onclick = function() {
7. alert(temp);
8. }
9. })();
10. }
11. }
5、加一层闭包，返回一个函数作为响应事件（注意与3的细微区别）
[javascript]
1. function init5() {
2. var pAry = document.getElementsByTagName("p");
3. for( var i=0; i<pAry.length; i++ ) {
4. pAry[i].onclick = function(arg) {
5. return function() {//返回一个函数
6. alert(arg);
7. }
8. }(i);
9. }
10. }
又有一种方法

6、用Function实现，实际上每产生一个函数实例就会产生一个闭包
[javascript]
1. function 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的区别
[javascript]
相关阅读:
Docker私有仓库
 Swarm配置文件管理
 Docker Swarm高可用性
 Docker集群管理Swarm数据持久化
 Swarm使用原生的overlay网络
 Docker Swarm集群部署
 Docker管理工具-Swarm
Docker多主机网络 OpenvSwitch
Docker网络 Weave
Docker Macvlan
原文地址：https://www.cnblogs.com/Decmber/p/5084562.html