JavaScript模式读书笔记 第2章 基本技巧

1，使用变量时使用var声明，防止出现隐式的全局变量。

    
    
    
    

     
     
     
     
 
       <script> 
     
     
     
     
     
 
       function sum(x, y){ 
     
     
     
     
     
 
        
     
     
     
     
     
 
        result = x + y;//此处未声明result。反模式：暗示result为全局变量。 
     
     
     
     
     
 
       return result; 
     
     
     
     
     
 
       } 
     
     
     
     
     
 
       window.onload = function (){ 
     
     
     
     
     
 
        
     
     
     
     
     
 
          result = 1;//声明全局变量 
     
     
     
     
     
 
       sum(1, 2); 
     
     
     
     
     
 
       console.log(result);//结果为3 
     
     
     
     
     
 
       } 
     
     
     
     
     
 
        </script> 
     
    
    
    
    

     
     
     
     

      
      
      
      
 
         <script> 
      
      
      
      
      
 
        function foo(){ 
      
      
      
      
      
 
         
      
      
      
      
      
 
        var a = b = 0;//b隐式声明为全局变量 
      
      
      
      
      
 
        } 
      
      
      
      
      
 
        window.onload = function (){ 
      
      
      
      
      
 
         
      
      
      
      
      
 
            b = 1; 
      
      
      
      
      
 
        foo(); 
      
      
      
      
      
 
        console.log(b);//输出0 
      
      
      
      
      
 
        } 
      
      
      
      
      
 
         </script> 
      
     
     
     
     

2，变量释放时的副作用

    -1，使用var创建的全局变量（在函数外部创建）不能删除。

    -2，不使用var创建的隐含全局变量（在函数内部创建）可以删除。

    
    
    
    

     
     
     
     
 
       
     
     
     
     
     
 
      <script> 
     
     
     
     
     
 
       var global_var1 = 1; 
     
     
     
     
     
 
          global_var2 = 2; 
     
     
     
     
     
 
       (function(){ 
     
     
     
     
     
 
        
     
     
     
     
     
 
        global_var3 = 3; 
     
     
     
     
     
 
       }()); 
     
     
     
     
     
 
        
     
     
     
     
     
 
       //delete object 
     
     
     
     
     
 
       console.log(delete global_var1);//false 
     
     
     
     
     
 
       console.log(delete global_var2);//true 
     
     
     
     
     
 
       console.log(delete global_var3);//true 
     
     
     
     
     
 
       
     
     
     
     
     
 
       //test delete result 
     
     
     
     
     
 
       console.log(typeof global_var1);//number 
     
     
     
     
     
 
       console.log(typeof global_var2);//undefined 
     
     
     
     
     
 
       console.log(typeof global_var3);//undefined 
     
     
     
     
     
 
        </script> 
     
    
    
    
    

3，全局变量window：可以直接返回this，从而执行全局变量。

4，单一var模式（Single var Pattern）：

  1，  防止变量未声明便使用

    2，防止出现全局变量:

    

   
   
   
   

    
    
    
    
 
     var a = 1, b = 2, c = 3;  
    
   
   
   
   

5，零散变量问题：

    Javascript允许函数任意位置声明变量，效果等同于在函数顶部声明。即所谓的“变量提升”。

    

   
   
   
   

    
    
    
    
 
     <script> 
    
    
    
    
    
 
      myName = "global"; 
    
    
    
    
    
 
      function foo(){ 
    
    
    
    
    
 
       
    
    
    
    
    
 
      //var myName; 
    
    
    
    
    
 
      alert(myName);//undefined，因为变量提升，此处的myName被看作局部变量。即等同于在此之前声明了如上注释的代码 
    
    
    
    
    
 
      var myName = "local"; 
    
    
    
    
    
 
      alert(myName);//local 
    
    
    
    
    
 
      } 
    
    
    
    
    
 
      foo(); 
    
    
    
    
    
 
       </script> 
    
   
   
   
   

6，for循环问题：

for循环便利数组的时候，尤其数组设计到DOM方法返回的对应数组，先使用临时对应存储可以很好的提高效率。

    
    
    
    

     
     
     
     
 
        <script> 
     
     
     
     
     
 
       functions looper(){ 
     
     
     
     
     
 
        
     
     
     
     
     
 
       var i = 0, max, myArray = []; 
     
     
     
     
     
 
        
     
     
     
     
     
 
       myArray = document.getElementsByName(); 
     
     
     
     
     
 
       for( i = 0, max = myArray.length; i < max; i++){ 
     
     
     
     
     
 
        
     
     
     
     
     
 
       } 
     
     
     
     
     
 
       } 
     
     
     
     
     
 
        </script> 
     
    
    
    
    

7，for-in循环：用来遍历非数组对象

    

   
   
   
   

    
    
    
    
 
       <script> 
    
    
    
    
    
 
      var man = {hands: 2, legs:2, leads:1}; 
    
    
    
    
    
 
      if(typeof Object.prototype.clone == "undefined"){ 
    
    
    
    
    
 
       
    
    
    
    
    
 
      Object.prototype.clone = function(){}; 
    
    
    
    
    
 
      } 
    
    
    
    
    
 
      
    
    
    
    
    
 
      for(var i in man){ 
    
    
    
    
    
 
       
    
    
    
    
    
 
      console.log(i , ":", man[i]); 
    
    
    
    
    
 
      } 
    
    
    
    
    
 
       </script> 
    
    
    
    
    
 
       
    
    
    
    
    
 
      
     

       输出结果： 
     
 
     
 
        
      hands : 2 test6.html:19 
     
 
     

       legs : 2 test6.html:19 
     
 
     

       leads : 1 test6.html:19 
     
 
     

       clone : function (){}