闭包常见问题及解决方案

闭包常见的问题就是在无形之中几个闭包共享同样的变量，导致结果与预期不符。
HTML代码：

<!Doctype html>
<html>
<head>
    <meta charset=utf-8 />
    <title>closure test</title>
    <style>
    .hidden{
        display: none;
    }
    .visible{
        display: block;
    }
    </style>    
    
</head>
<body>
    <ul id="menu">
        <li>
            <h3>文章管理</h3>
            <dl class="hidden">
                <a href="#"><dd>添加文章</dd></a>
                <a href="#"><dd>文章列表</dd></a>
            </dl>
        </li>

        <li>
            <h3>教师管理</h3>
            <dl class="hidden">
                <a href="#"><dd>添加教师</dd></a>
                <a href="#"><dd>教师列表</dd></a>
            </dl>
        </li>

    </ul>

</body>
</html>

当使用以下js代码添加事件时发现与预期结果（点击标题时不显示隐藏的内容）不符：

<script type="text/javascript">
window.onload=function(){
var menu = document.getElementById("menu");
var element = menu.getElementsByTagName("h3");
for(var i=0;i<element.length;i++){
    element[i].onclick=function(){
        var dl=element[temp].parentNode.childNodes[3];
    if (dl.className == "hidden") {
                dl.className = "visible";
            } 
    else if (dl.className == "visible") {
    dl.className = "hidden";
    } 

    }

 }

}

遇到这类问题的解决方案为：
（1）使用this
（2）使用匿名函数

（3）使用函数调用

  1. 使用this

     

<script type="text/javascript">
    window.onload = function() {
        var menu = document.getElementById("menu");
        var element = menu.getElementsByTagName("h3");
        
        for (var i = 0; i < element.length; i++) {
            element[i].onclick=function(){
                var dl=this.parentNode.childNodes[3];
                if (dl.className == "hidden") {
                    dl.className = "visible";
                } else if (dl.className == "visible") {
                dl.className = "hidden";
                }

            }
        }
        
    }
</script>

 

    2.使用匿名函数

</style>    
    <script type="text/javascript">
    window.onload = function() {
        var menu = document.getElementById("menu");
        var element = menu.getElementsByTagName("h3");
        for (var i = 0; i < element.length; i++) {
            (function(){    
                var temp=i;
                var dl=element[temp].parentNode.childNodes[3];
                element[temp].onclick = function() {
                    
                    if (dl.className == "hidden") {
                        dl.className = "visible";
                    } else if (dl.className == "visible") {
                        dl.className = "hidden";
                    }
                }

            })()
        }

    }

      3.使用函数调用

<script type="text/javascript">
    window.onload = function() {
        var menu = document.getElementById("menu");
        var element = menu.getElementsByTagName("h3");
        
        for (var i = 0; i < element.length; i++) {
            var dl=element[i].parentNode.childNodes[3];
            Add(element[i],dl);
        }
        function Add(elem,dl){
            elem.onclick=function(){
                if (dl.className == "hidden") {
                        dl.className = "visible";
                    } 
                    else if (dl.className == "visible") {
                        dl.className = "hidden";
                    }
            }

        }

    }

总的来说,解决闭包问题的核心是保存要使用的值，避免发生变量的共享。

 

posted @ 2015-11-01 17:34  珊瑚月  阅读(757)  评论(0)    收藏  举报