JavaScript淺析2——對象

    對象作為JavaScript的進階部分，其中有很多部分較難理解，在經過Anytao的《你必須知道的.NET》章節之-屬性與特性的糾葛恩怨、JQuery In Action等資料的推動下，在此總結對JS中對象的理解：

 

JS對象之內建對象：String、Math、DateTime、Array

      其中String對象，在上一篇JavaScript淺析1——類型中做了介紹。而對於Math對象（其內建了屬性以及靜態方法）、DateTime對象和Array對象，其使用方法雷同於C#，在此不再鼇述；

JS對象之自訂對象：

      作為最為常用的JS自訂對象，其中知識點豐富，值得深究（我認為，呵呵）。通過下面代碼看到對象的建立：

<script type ="text/javascript" language ="javascript" >
       //第一種建立方法——直接加對象屬性,使其具有制定屬性
       var carType=new Object ();
       carType.make='Ford';
       carType.model='Focus';
       carType.year=2009;
       carType.purchased=new Date(2010,1,27);
       //評述：這種對象建立方法不具有直觀性，且很容易由於更改屬性名稱導致錯誤，故不推薦使用
       
       //第二種建立方法——對象字面量
       var carType={
       make:'Ford',
       model:'Focus',
       year:2009,
       purchased:new Date (2010,1,27),
       owner:{
       name:'Yang',
       occupation:'Engineer'
        }
       };
       //評述：這種對象建立方法直觀，同時這種標記法成為JSON（JavaScript Object Notation）
       
       
    </script>

       在JavaScript中並沒有C#中對於對象的參考型別儲存方式，但是就操作來說，依然可以認為是將記憶體對象賦予對應類型的引用（這點雷同於C#中對象）。從上例可以看到：作為對象的屬性，依然可以是以對象！（同C++，C#中對象的複合）。

      講到這裡，我們將要引出本文最重要的議題——函數。函數在JavaScript中是如何儲存的？於C#中一樣嗎？

      如果事先沒有準備，將很難回答，但會隱約感到其中會有不同。是嗎？還是我們先來看看函數的定義方法吧：

<script type ="text/javascript" language ="javascript" >
       //第一種實現函數方法，也是最常用方法
       function ClickButton()
       {
         //函數體實現
       }
       
       //第二種實現函數方法
       var ClickButton=function ()
                  {
                      //函數體實現
                  }
       
    </script>

       函數怎麼會有多種定義方法？有沒有搞錯？答案是：否！

       下面就來揭示函數的本質：函數作為最為特殊的JS的對象（註：有的地方甚至把函數成為：一等公民（對象）），是作為對象來維持的！

       也就是在一般情況下，可以把函數看成對象，對於賦值，即同一般對象賦值——將記憶體對象賦予其對應類型的引用，這也就不難理解上述的函數多種建立方法了，呵呵。

 

附：控制項事件之——“return CheckBoxVoid();”解析：

       學習JavaScript與DOM互動，判斷驗證條件時（此例中假設判定 TextBox非空），在Button的onclick事件中如上述寫道，甚是不解，然在JQuery In Action中無意獲得答案，現分析之：

        先看下面代碼：

<img id="yangImage" src="yang.gif" alt ="an image" class="class1" title="This yang's image" />

      對於此HTML代碼，瀏覽器該如何解析呢？這首先要講到DOM（Document Object Model）模型，它是基於對象的，亦即它將元素抽象為元素對象，其具有屬性的特徵，這不難理解。然而此時的關注點是元素對象的屬性與HTML代碼中是否相同？怎樣處理？

       事實上，在轉化的過程中，並不是名稱嚴格匹配的，會有偏差，觀察：

 

 

     由圖中可見，屬性src被轉換為絕對URL，同時class特性被轉換為屬性className；由此我們可以看到HTML特性轉化為DOM元素屬性時可能有的一些變化。現在通過看如下代碼，看事件是如何定義的：

<script type ="text/javascript" language ="javascript" >
      //假設提交按鈕id為btnSubmit
       document.getElementById ("btnSubmit").onclick=function ()
       {
         CheckBoxVoid ();
       }
       function CheckBoxVoid()
       {
          if(document.getElementById("txtbox").value=="")
            return false;
          return true ;  
       } 
        
    </script>

       由前論述，在對象內，其屬性依然可以是對象。又由於函數是以一種特殊對象維持，故給按鈕元素的onclick事件屬性賦以函數引用；而對於起到同樣效果的HTML代碼（如下示：），該如何解釋呢：

<input type ="submit" id="btnSubmit" onclick ="return CheckBoxVoid();" />

     這就要從瀏覽器解析HTML成DOM文檔樹說起，它將其中的onclick對應成分——"return CheckBoxVoid();"置入其自建的函數內（如下代碼示），而"return"說明返回布爾型。

     

document.getElementById ("btnSubmit").onclick=function ()
       {
        if(document.getElementById("txtbox").value=="")
            return false;
          return true ; 
       }

  

      即可看到在HTML代碼中事件程式的轉化過程，即"return CheckBoxVoid();"可以充分理解了。