关于js for循环闭包的问题

来源：互联网发布：mysql禁用反向解析编辑：程序博客网时间：2024/05/17 07:48

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <script>        window.onload = function(){            var pArr = document.getElementsByTagName("p");            var pLen = pArr.length;            for(var i = 0 ; i < pLen ;i++){                pArr[i].onclick = function(){                    alert(i);                }            }        }    </script></head><body><p>产品1</p><p>产品2</p><p>产品3</p><p>产品4</p><p>产品5</p></body></html>

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

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>p{cursor: pointer;}</style>    <script>        window.onload = function () {            function init(){                var pAry = document.getElementsByTagName("p");                var pAryLen = pAry.length;                for(var i = 0 ; i < pAryLen ;i++){                    pAry[i].i = i;                    pAry[i].onclick = function(){                        alert(this.i);                    }                }            }            init();        }    </script></head><body><p>产品1</p><p>产品2</p><p>产品3</p><p>产品4</p><p>产品5</p></body></html>

2、将变量 i 保存在匿名函数自身 (此方法和上面的类似, 只是把i从保存在对象p上, 改成保存在pAry[i].onclick这个函数上)

关于arguments.collee的一个介绍

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/arguments/callee

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>p{cursor: pointer;}</style>    <script>        window.onload = function () {            function init(){                var pAry = document.getElementsByTagName("p");                var pAryLen = pAry.length;                for(var i = 0 ; i < pAryLen ;i++){//                    关于arguments.callee的介绍, 请看该网址https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/arguments/callee                    (pAry[i].onclick = function(){                        alert(arguments.callee.i);                    }).i = i;                }            }            init();        }    </script></head><body><p>产品1</p><p>产品2</p><p>产品3</p><p>产品4</p><p>产品5</p></body></html>

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

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>p{cursor: pointer;}</style>    <script>        window.onload = function () {            function init(){                var pAry = document.getElementsByTagName("p");                var pAryLen = pAry.length;                for(var i = 0 ; i < pAryLen ;i++){                    (function fn(j){//j只是一个形参,该成什么都可以, 只要和后面alert的一致就行了                        pAry[i].onclick = function(){                            alert(j);                        }                    })(i);//这里的i是指函数调用时候用的值, 这个值传给了里面的j                }            }            init();        }    </script></head><body><p>产品1</p><p>产品2</p><p>产品3</p><p>产品4</p><p>产品5</p></body></html>

?<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>p{cursor: pointer;}</style>    <script>        window.onload = function () {            function init(){                var pAry = document.getElementsByTagName("p");                var pAryLen = pAry.length;                for(var i = 0 ; i < pAryLen ;i++){                    (function fn(j){//j只是一个形参,该成什么都可以, 只要和后面alert的一致就行了                        pAry[i].onclick = function(){                            alert(j);                        }                    })(i);//这里的i是指函数调用时候用的值, 这个值传给了里面的j                }            }            init();        }    </script></head><body><p>产品1</p><p>产品2</p><p>产品3</p><p>产品4</p><p>产品5</p></body></html>

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

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>p{cursor: pointer;}</style>    <script>        window.onload = function () {            function init(){                var pAry = document.getElementsByTagName("p");                var pAryLen = pAry.length;                for(var i = 0 ; i < pAryLen ;i++){                    (function fn(){                        var temp = i ;                        pAry[i].onclick = function(){                            alert(temp);                        }                    })();                }            }            init();        }    </script></head><body><p>产品1</p><p>产品2</p><p>产品3</p><p>产品4</p><p>产品5</p></body></html>

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

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>p{cursor: pointer;}</style>    <script>        window.onload = function () {            function init(){                var pAry = document.getElementsByTagName("p");                var pAryLen = pAry.length;                for(var i = 0 ; i < pAryLen ;i++){                    pAry[i].onclick = function(j){                        return function(){//返回一个函数                            alert(j);                        }                    }(i);                }            }            init();        }    </script></head><body><p>产品1</p><p>产品2</p><p>产品3</p><p>产品4</p><p>产品5</p></body></html>

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

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>p{cursor: pointer;}</style>    <script>        window.onload = function () {            function init(){                var pAry = document.getElementsByTagName("p");                var pAryLen = pAry.length;                for(var i = 0 ; i < pAryLen ;i++){                    pAry[i].onclick = new Function("alert("+i+");");                }            }            init();        }    </script></head><body><p>产品1</p><p>产品2</p><p>产品3</p><p>产品4</p><p>产品5</p></body></html>

7、用Function实现，注意与6的区别(说实话, 目前我自己也不知道, 7和6这点区别有啥影响, 希望知道的大佬看到了能够给我解释,谢谢!)

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>p{cursor: pointer;}</style>    <script>        window.onload = function () {            function init(){                var pAry = document.getElementsByTagName("p");                var pAryLen = pAry.length;                for(var i = 0 ; i < pAryLen ;i++){                    pAry[i].onclick = Function("alert("+i+");");                }            }            init();        }    </script></head><body><p>产品1</p><p>产品2</p><p>产品3</p><p>产品4</p><p>产品5</p></body></html>

最后如果想要知道js申明函数的方法, 可以看

http://www.jb51.net/article/80861.htm

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

阅读全文

0 0