js 闭包概念,用法

1.闭包概念【IE下可能会引起内存泄漏】

(1)我们常说的闭包就是函数嵌套函数,内部函数可以引用外部函数的参数和变量    【代码如下】

(2)会涉及到js中的垃圾回收机制(指:当函数执行完时,函数的变量将会收回,闭包就不一样了)   【代码如下】

(3)闭包中当外部函数加载完时,外部函数的变量内部函数还可以继续使用,不会回收   【代码如下】

(4)闭包的好处 

①将一个变量长期驻扎在内存中    【代码如下】

②避免全局变量对函数的污染    【代码如下】

③私有成员的存在   【代码如下】

(5)闭包的用法   【代码如下】

①模块化代码  【代码如下】

②在循环中直接找到对应元素的索引   【代码如下】

2.代码如下

(1)    or  example (1)

<script>
//闭包中的函数 function one(name){ //外部函数 var name="ruanjiang"; function two(){ //内部函数 alert(name); } return two; } var c = one(); //one函数以及执行完毕,c代表two这个函数 c(); </script>
输出: ruanjiang

(2)    or  example

//js中正常函数
            function one(){
                var name="ruanjiang";
                alert(name)
            }
            one();//输出ruanjiang
            function two(){
                alert(name);
            }
            two();//输出为空

(3)  for  example  (1)(2)(3)(4)①②

//js原全局变量的污染
            var a=1;//为全局变量
            function one(){
                a++;
                alert(a);
            }
            one(); //、2
            one(); //3
            alert(a);//函数外部可引用a

//垃圾回收机制 function one1(){ var a =1; a++; alert(a); } one1(); //、2 one1(); //、2 //闭包 function one2(){ var a= 1; return function(){ a++; alert(a); } } var b =one2(); b(); //2 b(); ///3 alert(a);//a为空 表示a为局部变量

(4)    for example  (4)③    (5)①

//函数声明函数diaoyong
            function one(){
                alert("我是声明函数");
            }
            one();
            //函数表达式
            (function one1(){
                alert("我是函数表达式");
            })();
 //模块化代码
            var one2=(function (){
                var a=1;
                return function(){
                    a+=2;
                    alert(a);
                }
            })();
            one2();  //3
            one2();  //5
  //私有成员 方法函数
            var one3=(function(){
                var a =1;
                function bbb(){//私有成员
                    a++;
                    alert(a);
                }
                function aaa(){ //私有成员
                    a+=5;
                    alert(a);
                }
                return{//返回json数据
                    b :bbb,
                    c :aaa
                }
            })();
            one3.b(); //2
            one3.c(); //7
            
            //alert(a); not defind
            //alert(bbb); not defind
            //alert(ccc); not defind

(5)for example  (5)②

 方法一
<script> window.onload = function(){ var oLi = document.getElementsByTagName('li'); for(var i=0;i<oLi.length;i++){ (function(i){ //循环变量的i,已经存入内存,读取 oLi[i].onclick = function(){ alert("这是一楼"+i); } })(i); } } </script> </head> <body> <ul> <li>这是你的一楼爸爸</li> <li>这是你的二楼爸爸</li> <li>这是你的三楼爸爸</li> </ul> </body>
输出结果:点击点一个li输出这是一楼0,点击第二个li输出这是一楼1,以此类推

方法二
window.onload = function(){
                var oLi = document.getElementsByTagName('li');
                
                for(var i=0;i<oLi.length;i++){
                    oLi[i].onclick = (function(i){ //循环遍历的i已经存入内存中
                        return function(){
                            alert(i);
                        }
                    })(i);
                    
                }
            }

 

 3.ie下闭包引起的内存泄漏

//闭包在ie下可能会引起内存泄漏
            //js的对象属性(oDiv.onclick)引诱内部的时候(oDiv.id),内部又应有外部对象,就会引起
            window.onload = function(){
                var oDiv = document.getElementById('div1');
                oDiv.onclick = function(){
                    alert(oDiv.id);
                }
            }
            //解决方法一,当window.onload出现时将事件取消
            window.onunload = function (){
                oDiv.onclick = null;
            }
            //方法二
            window.onload = function(){
                var oDiv = document.getElementById('div1');
                
                var id = oDiv.id;
                
                oDiv.onclick = function(){
                    alert(id);
                };
                
                oDiv = null;
    
            };

 

①②③④⑤⑥⑦⑧

posted @ 2018-12-03 21:40  请叫我怪兽  阅读(300)  评论(0编辑  收藏  举报