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

变量作用域

变量作用域指的是变量的作用范围，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>