JavaScript浅析2——对象

时间:2021-10-08 14:48:57

    对象作为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代码中是否相同?怎样处理?

       事实上,在转化的过程中,并不是名称严格匹配的,会有偏差,观察下图:

JavaScript浅析2——对象 

 

     由图中可见,属性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();"可以充分理解了。JavaScript浅析2——对象