美文网首页前端开发宝典WEB前端程序开发Web前端之路
Javascrip 之 变量作用域 & 封闭函数 &am

Javascrip 之 变量作用域 & 封闭函数 &am

作者: 奋斗的老王 | 来源:发表于2018-03-24 10:20 被阅读18次

    变量作用域

    变量作用域指的是变量的作用范围,javascript中的变量分为全局变量和局部变量。

    • 1、全局变量:在函数之外定义的变量,为整个页面公用,函数内部外部都可以访问。
    • 2、局部变量:在函数内部定义的变量,只能在定义该变量的函数内部访问,外部无法访问。
        <script type="text/javascript">
            //全局变量
            var a = 12;
            function myalert()
            {
                //局部变量
                var b = 23;
                alert(a);
                alert(b);
            }
            myalert(); //弹出12和23
            alert(a);  //弹出12    
            alert(b);  //出错
        </script>
      

    封闭函数

    • 封闭函数是javascript中匿名函数的另外一种写法,创建一个一开始就执行而不用命名的函数。

    • 一般定义的函数和执行函数:

      function changecolor(){
          var oDiv = document.getElementById('div1');
          oDiv.style.color = 'red';
      }
      changecolor();
      
    • 封闭函数:

      (function(){
          var oDiv = document.getElementById('div1');
          oDiv.style.color = 'red';
      })();
      
    • 还可以在函数定义前加上“~”和“!”等符号来定义匿名函数

      !function(){
      var oDiv = document.getElementById('div1');
      oDiv.style.color = 'red';
      }()
      

    闭包

    • 什么是闭包

      • 函数嵌套函数,内部函数可以引用外部函数的参数和变量,参数和变量不会被垃圾回收机制收回

        function aaa(a){      
              var b = 5;      
              function bbb(){
                   a++;
                   b++;
                 alert(a);
                 alert(b);
              }
              return bbb;
          }
        
         var ccc = aaa(2);
        
         ccc();
         ccc();
        
      • 改写成封闭函数的形式:

        var ccc = (function(a){
        
          var b = 5;
          function bbb(){
               a++;
               b++;
             alert(a);
             alert(b);
          }
          return bbb;
        
        })(2);
        
        ccc();
        ccc();
        
    • 用处

      • 1、将一个变量长期驻扎在内存当中,可用于循环中存索引值

        <script type="text/javascript">
            window.onload = function(){
                var aLi = document.getElementsByTagName('li');
                for(var i=0;i<aLi.length;i++)
                {
                    (function(i){
                        aLi[i].onclick = function(){
                            alert(i);
                        }
                    })(i);
                }
            }
        </script>
        ......
        <ul>
            <li>111</li>
            <li>222</li>
            <li>333</li>
            <li>444</li>
            <li>555</li>
        </ul>
        
      • 2、私有变量计数器,外部无法访问,避免全局变量的污染

        <script type="text/javascript">
        
        var count = (function(){
            var a = 0;
            function add(){
                a++;
                return a;
            }
        
            return add;
        
        })()
        
        count();
        count();
        
        var nowcount = count();
        
        alert(nowcount);
        
        </script>
        

    相关文章

      网友评论

        本文标题:Javascrip 之 变量作用域 & 封闭函数 &am

        本文链接:https://www.haomeiwen.com/subject/agqqcftx.html