关于js中的所谓的for循环典型问题的剖析，通过现象看本质
Posted 考拉的墨尔本
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了关于js中的所谓的for循环典型问题的剖析，通过现象看本质相关的知识，希望对你有一定的参考价值。
由于js语言的特性，所以在js中可能会出现一些有趣的问题。我们这篇博文讨论的for循环问题就是一个很有意思的东东。那么首先我们先要知道这个for循环问题到底指的是什么。
1.首先了解简单的for循环
<body>
<input type="button" value="按钮1">
<input type="button" value="按钮2">
<input type="button" value="按钮3">
</body>
<script type="text/javascript">
var myIts=document.getElementsByTagName("input");
for(var i=0;i<myIts.length;i++)
myIts[i].οnclick=function()
console.log(i);
</script>2.基于上面的for循环代码，我们思考为什么输出是三个3，而不是0,1,2
首先在js中没有块级作用域的概念，所以我们可以这样解析上面for循环的结果，在for循环中的click事件中是没有i变量的，所以按照函数作用域链的规则，会沿着作用域链向上查找，很明显i变量是定义在for循环中，而for循环中的变量是window的，所以这时候在点击button的时候变量i的值就变成了3。3.关于这个for循环问题的从代码的层面上进行解析
在标题1中的for循环代码中，我们拆开来看， 1.首先for循环第一次执行----------->unction()console.log(i)----此时i=0 2.for循环的第二次执行-------------->function()console.log(i)----此时i=1 3.for循环的第三次执行-------------->function()console.log(i)----此时i=2 4.for循环的第四次执行，此时i=3,不满足if条件，所以停止执行。 5.所以当我们点击按钮的时候，i已经变成了3，所以点击所有的按钮都会输出3。4.对于这个问题的解决方法
1.在每一次执行的时候，将i的值保存在每一个button中。即 <body>
<input type="button" value="按钮1">
<input type="button" value="按钮2">
<input type="button" value="按钮3">
</body>
<script type="text/javascript">
var myIts=document.getElementsByTagName("input");
for(var i=0;i<myIts.length;i++)
myIts[i].οnclick=function()
console.log(this.number);
myIts[i].number=i;
</script>2.使用匿名自执行函数模拟块级作用域
<body>
<input type="button" value="按钮1">
<input type="button" value="按钮2">
<input type="button" value="按钮3">
</body>
<script type="text/javascript">
var myIts=document.getElementsByTagName("input");
for(var i=0;i<myIts.length;i++)
(function(num)
myIts[num].οnclick=function()
console.log(num);
)(i);
</script>5.总结
以上就是js中的for循环问题，其实这样的问题挺有意思的，可以加深我们对于js中某些知识的理解。通过现象看本质，对于for循环问题，我们了解这么多就可以了。以上是关于关于js中的所谓的for循环典型问题的剖析，通过现象看本质的主要内容，如果未能解决你的问题，请参考以下文章