zoukankan      html  css  js  c++  java
  • 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;
        
                };

    ①②③④⑤⑥⑦⑧

  • 相关阅读:
    node.js创建服务,发送请求后返回数据
    node.js写入文件
    node.js读取文件
    elementUi的隐藏组件el-scrollbar滚动条
    [笔记]何为Linux及其文件系统(二)
    [笔记]何为Linux及其文件系统(一)
    [转文]简单理解数学、密码学、计算机、互联网、分布式数据库、区块链、分布式账本、密码货币
    [转文]Linux搭建最简单的邮件服务器
    [笔记]Why is UDP used for DNS instead of TCP?
    什么是IP地址、子网掩码、路由和网关?
  • 原文地址:https://www.cnblogs.com/520Girl/p/10061108.html
Copyright © 2011-2022 走看看