《編寫高質量代碼--改善JavaScript程序的188個建議》學習記錄（六）

JavaScript編程規範和應用
（一）準確分析JavaScript執行順序
alert(a);   //undefined
var a = 1;
alert(a);   //1
  因爲變量聲明實在預編譯期進行的，所以，在執行期間，變量對全部代碼來講都是可見的，執行上面的代碼，提示的值是undefined，而不是1，這是由於變量初始化過程發生在執行期而不是預編譯期。在執行期，JavaScript解釋器是按着代碼前後順序進行解析的，若是在前面代碼行中沒有爲變量賦值，那麼JavaScript解釋器就會使用默認值undefined，因爲在第二行中爲變量a賦值了，所以在第三行代碼中會提示變量的值爲1而不是undefined。
    同理，在下面實例中，在函數聲明前調用函數也是合法的，並可以被正確解析，所以，返回值爲1
   f();  //1
   function f(){
     alert(1);
}
可是，若是按照下面方式定義函數，那麼JavaScript解釋器會提示語法錯誤
f();   //undefined
var f = function(){
    alert(1);
}
在上面的代碼中定義的函數僅做爲值複製給變量f，所以，在預編譯期，JavaScript解釋器只能爲聲明變量f進行處理，而對於變量f的值，只能等到執行期按順序進行賦值，天然就會提示語法錯誤，提示找不到對象f。
 因爲JavaScript是按塊執行的，所以在一個JavaScript塊中調用後面塊中變量或函數就會提示語法錯誤，例如，在JavaScript解釋器中執行下面代碼時就會提示語法錯誤，顯示變量a未定義，對象f找不到。
    <script type="text/javascript">
       alert(a);
       f();
     </script>
  <script type="text/javascript">
      var a = 1;
      function f(){
        alert(1);
      }
  </script>
  雖然JavaScript是按塊執行的，可是不一樣塊都屬於同一個全局做用域，也就是說，塊之間的變量和函數是能夠共享的。因爲JavaScript是按塊處理代碼，同時又遵循html文檔流的解析順序，所以在上面示例中會看到語法錯誤，可是在文檔流加載完畢後再次訪問就不會出現這樣的錯誤，例如，把訪問第2個代碼塊中的變量和函數的代碼放在頁面初始化事件函數中，這樣就不會出現語法錯誤了。
      <script type="text/javascript">
    window.onload = function(){
       alert(a);
       f();
    }
     </script>
  <script type="text/javascript">
      var a = 1;
      function f(){
        alert(1);
      }
  </script>
  若是一個頁面中存在多個window.onload事件處理函數，那麼只有最後一個纔是有效的，爲了解決這個問題，能夠吧全部腳本或者調用函數都放在同一個onload事件處理函數中
 
 （二）關於document.write
     document.write('<script type="text/javascript">');
     document.write('f();');
     document.write('function f(){');
     document.write('alert(1);');
     document.write('}');
     document.write('<\/script>   ');
     使用document.write()方法輸出的JavaScript腳本字符串必須放在同時輸出的<script>標籤中，不然JavaScript解釋器會由於不能識別這些合法的JavaScript代碼而做爲普通的字符串顯示在頁面文檔中，例如，下面的代碼就會把JavaScript代碼顯示出來，而不是執行它：
     document.write('f();');
     document.write('function f(){');
     document.write('alert(1);');
     document.write('}');
  經過document.write()方法輸出並執行腳本也存在必定的風險，由於不一樣的JavaScript引擎對其執行順序不一樣，同時不一樣瀏覽器在解析是也會出現bug
  （1）找不到經過document.write()方法導入的外部JavaScript文件中聲明的變量或函數，例如：
     document.write('  <script type="text/javascript" src ="test.js"><\/script>');
     document.write('<script type="text/javascript">');
     document.write('alert(n);');
     document.write('<\/script>   ');
     alert(n+1);
     分別在不一樣瀏覽器中測試，均會發現提示語法錯誤，找不到變量n,也就是說，若是在JavaScript代碼塊中訪問本代碼塊使用document.write()方法輸出的腳本導入的外部JavaScript文件所包含的變量，會顯示錯誤，同時，若是在IE中，不只在腳本中，在輸出的腳本中也會提示找不到輸出的導入外部JavaScript文件的變量
   （2）不一樣JavaScript引擎對輸入的外部導入腳本的執行書序略有不一樣，例如:
       <script type="text/javascript">
     document.write('  <script type="text/javascript" src ="test.js"><\/script>');
     document.write('<script type="text/javascript">');
     document.write('alert(2);');
     document.write('alert(n+2);');
     document.write('<\/script>  ');
     </script>
  <script type="text/javascript">
     alert(n+4);
  </script>
  上面這段代碼在高級瀏覽器中執行時分別會彈出：1,2,3,5，可是在IE中會彈出：2，錯誤，1,5
  能夠把凡是輸出腳本導入的外部文件，都放在獨立的代碼塊中，這樣根據上面介紹的JavaScript代碼塊執行順序，就能夠解決不一樣瀏覽器的不一樣執行順序的問題，以及可能存在的bug，例如：
      <script type="text/javascript">
     document.write('  <script type="text/javascript" src ="test.js"><\/script>');
  </script>
  <script type="text/javascript">
     document.write('<script type="text/javascript">');
     document.write('alert(2);');
     document.write('alert(n+2);');
     document.write('<\/script>  ');
     </script>
  <script type="text/javascript">
     alert(n+4);
  </script>
  這樣，在不一樣的瀏覽器中都可以保證按順序執行上面的代碼
 （三）減一使用直接量
 在JavaScript中有多種方法建立對象和數組，可是沒有什麼比建立對象和數組直接量更快的。例如：
 var obj = {
   name : "sunshine",
   age: 32
}
 var arr = ['name','age'];