【javascript】javascript闭包经典代码

最新推荐文章于 2023-02-13 16:04:22 发布

转载最新推荐文章于 2023-02-13 16:04:22 发布 · 495 阅读

文章标签：

#javascript #闭包

javascript 专栏收录该内容

21 篇文章

订阅专栏

本文通过两个示例比较了使用闭包与直接DOM方法在实现点击链接弹出编号功能时的区别。前者利用闭包保存每次迭代的变量状态，后者则直接修改DOM元素属性。

比较闭包和DOM直接方法

<!-- dom污染法： -->
<!-- 实现一段脚本，使得点击对应链接alert出相应的编号 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<body>
<a href='#'> 第一个链接 </a> 
</br>
<a href='#'> 第二个链接 </a> 
</br>
<a href='#'> 第三个链接 </a> 
</br>
<a href='#'> 第四个链接 </a> 
</br>
    <script type="text/javascript">
    var lis = document.links;
    for (var i = 0, length = lis.length; i < length; i++) {
        lis[i].index = i;
        lis[i].onclick = function() {
            alert(this.index);
        };
    }
    </script>
</body>
<!-- 闭包： -->
<!-- 实现一段脚本，使得点击对应链接alert出相应的编号 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<body>
<a href='#'> 第一个链接 </a> 
</br>
<a href='#'> 第二个链接 </a> 
</br>
<a href='#'> 第三个链接 </a> 
</br>
<a href='#'> 第四个链接 </a> 
</br>
    <script type="text/javascript">
    var lis = document.links;
    for (var i = 0, length = lis.length; i < length; i++) {
        (function(i) {
            lis[i].onclick = function() {
                alert(i + 1);
            };
        })(i);
    }
    </script>
</body>