时生闭包的学习

最新推荐文章于 2024-07-19 00:05:28 发布

转载最新推荐文章于 2024-07-19 00:05:28 发布 · 165 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/-gap/archive/2012/09/08/2676666.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>时生闭包的学习,教程来自妙味课堂</title>
<script>
//-------------------------------------------------------------------------------------------
//1.什么是闭包
//函数嵌套函数，内部函数可以引用外部函数的参数和变量，变量和参数不会被垃圾回收机制所收回
/*
function aaa(a){
    var b = 5;
    function bbb(){
        console.log(a); //a,b可以访问到，并不会被垃圾回收机制回收
        console.log(b);    
    }
}
aaa();
*/

/*JS中的垃圾回收机制
function aaa(){
    var a = 1;       
}
这个函数执行完，这个变量a就会被回收机制回收了。*/

//测试
/*
function aaa(){
    var a = 5;
    function bbb(){
        console.log(a);
    }
    return bbb;
}
var c = aaa();
c();//c = bbb();  弹出5
*/

//-------------------------------------------------------------------------------------------
/*
2.闭包的好处
1)希望一个变量长期驻扎在内存中
2)避免全局变量的污染
3)私有成员的存在
*/
//用法1.模块化代码
//用法2.在循环中直接找到对应元素的索引
/*var a = 1;
function aaa(){
    a++;
    alert(a);
}
aaa();    //2
aaa();    //3
alert(a);//在函数外可以调用。*/


/*function aaa(){
    var a = 1;    //局部变量
    a++;
    alert(a);
}

aaa();    //2
aaa();    //2        每次都重新执行了
*/

/*function aaa(){
    var a = 1;    
    return function(){
        a++;
        alert(a);    
    }
}
var c = aaa();
c();    //2
c();    //3*/
//alert(a);    //a is not defined

//用法1.模块化代码
/*
(function(){})  //函数表达式
(function(){})() //调用*/

/*
var aaa = (function(){
    var a = 1;
    return function(){
        a++;
        alert(a);
    }    
})()//模块化代码，避免全局变量的污染

aaa();     
aaa();*/

/*
var aaa =(function(){
    var a= 1;    //私有属性
    function bbb(){    //私有方法
        a++;
        alert(a);
    }
    function ccc(){
        a++;
        alert(a);
    }
    return {
        b:bbb,
        c:ccc
    }
})()
aaa.b();    //2
aaa.c();    //3
alert(a);    //没有找到 is not defined
alert(bbb);    //没有找到 is not defined
alert(ccc);    //没有找到 is not defined
*/

//用法2.在循环中直接找到对应元素的索引
window.onload = function(){
    var _li = document.getElementsByTagName("li");
    /*for(var i = 0 ; i < _li.length ; i++){
        //循环执行结束制还没执行onclick
        _li[i].onclick = function(){
            alert(i);        //点击都为3
        }
    }*/
    //写法一
    /*
    for(var i = 0 ; i < _li.length ; i++){
        (function(i){
            //利用闭包将i作为参数传进来
            _li[i].onclick = function(){
                alert(i);    // 0,1,2
            }
        })(i)
    }
    */
    //写法二
    /*
    for(var i = 0 ; i < _li.length ; i++){
        _li[i].onclick = (function(i){
            return function(){
                alert(i);    // 0,1,2
            }
        })(i)
    }
    */
//--------------------------------------------------------------------------------
//3.使用闭包需要注意什么？
//闭包在IE下容易引发内存泄漏
//内存泄漏会导致页面跳转时变量还没释放导致CPU一直增加，只有关闭浏览器才会释放。
//引发原因
//当一个变量(oDiv)是DOM节点或数组对象的时候,他的一个属性(oDiv.onclick)去引用一个内部函数，而内部函数里的变量又去引用外部的(oDiv.id)
    var oDiv = document.getElementById('div1');
    oDiv.onclick = function(){
        alert(oDiv.id);    
    };
    //解决方法1. 变量属性为NULL;
    window.onunload = function(){
        oDiv.onclick = null;    
    }
    //解决方法2.将对象为NULL；
    var oDiv = document.getElementById('div1');
    var id = oDiv.id;
    oDiv.onclick = function(){
        alert(id);    
    };
    oDiv = null;
}


</script>
</head>
<body>
<ul id="myul">
<li>11111</li>
<li>22222</li>
<li>33333</li>
</ul>

<div id="div1">aaaa</div>
</body>
</html>

转载于:https://www.cnblogs.com/-gap/archive/2012/09/08/2676666.html