js初学者常遇到的一个for循环中onclick问题

最新推荐文章于 2024-07-04 12:49:34 发布

全赞功成湿

最新推荐文章于 2024-07-04 12:49:34 发布

阅读量1.5w

点赞数 18

分类专栏： js 文章标签： onclick 闭包 javascript 点击事件初学者

本文链接：https://blog.csdn.net/k358971707/article/details/52968378

版权

js 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

首先看一段代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <button>0</button>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
    <script> 
        var btn=document.getElementsByTagName('button');
        for(var i=0;i<btn.length;i++){ 
            btn[i].onclick=function(){ 
                console.log(i);
            }
        }
    </script>
</body>
</html>

然后运行一下，当时作为一名天真的js初学者理所当然的认为分别点击不同的额按钮，会分别的打印出0、1、2、3、4，然而事与愿为，现实和理想总是存在差距，点击不同的按钮，打印却都是5，百思不得其解，不科学啊！
最后百度了一番才恍然大悟，原来console.log(i)里的i在循环完成的时候被赋值成了5，而每个按钮的onclick都被赋值了同一个function,也就是说每个function里的i指的是同一个i，i=5，自然每个点击都会打印出5，那么该怎么解决呢？！
再看接下来这段代码：

    <script> 
        var btn=document.getElementsByTagName('button');
        for(var i=0;i<btn.length;i++){ 
            (function(i){ //这个是function里i，即function的形参，也可以换成j，换成什么变量名都无所谓
                btn[i].onclick=function(){ 
                    console.log(i);
                }
            })(i);//这是循环中的i,被作为参数传入
        }
    </script>

再运行这段代码，就可以得到你想要的效果，但是是为什么呢？
知道了原因就好办了，利用闭包把每个function里的i都变成不同的i就行了，当时作为一名初学者还不懂闭包，也是后来才理解的。
循环中的function自调用，将循环中的i作为参数传入function中，此时，function中的i已经不是循环中的i了（这里有点绕，其实形参i，即function里的i换成什么变量名都行），而是在内存中开辟了一个内存空间存储了作为参数传进来的i的值，这样function中的就不会随着循环中的i的值的改变而改变了,就可以打印出你要的结果了。

怎么样？是不是很坑爹，这是一个很常见的问题，还望js的初学者们好好体会，我当时也是蒙蔽了好久！！！