使用Javascript和prototype.js框架创建类型及其相关的prototype属性的简单介绍

来源:岁月联盟 编辑:exp 时间:2012-10-19

Javascript中创建对象可归纳为三种方式:工厂函数、构造函数和原型方式。
工厂函数方式利用javascript基础类Object,对Object的一个实例增加相应的属性和方法以达到新类型所期望的结果。如下代码展示了类型NewClassType1含有一个属性attribute1。
[javascript] 
//工厂函数方式,返回特定类型的对象实例 
      functionNewClassType1(){ 
                varo = new Object(); 
                o.attribute1= 3; 
                returno; 
      };  
获取NewClassType1类型的实例,类似于设计模式中的工厂方法,直接调用即可。如下代码展示获取NewClassType1的实例,及操作其attribute1属性的过程(其中“//->”后面展示了提示结果)。
[javascript]
<pre name="code" class="javascript">          
         var t1 =NewClassType1(); 
         t1.attribute1+= 3; 
         alert("t1.attribute1= " + t1.attribute1); 
         //->t1.attribute= 6</pre> 

构造函数方式创建class使用关键字this来建立类中属性或方法。使用new关键字来获取实例。
[javascript] 
//构造函数方式,用new获取特定类型的对象实例 
  functionNewClassType2(){ 
            this.attribute2= 2; 
  }; 
  vart2 = new NewClassType2(); 
  t2.attribute2+= 6 
  alert("t2.attribute2= " + t2.attribute2); 
  //->t2.attribute2= 8  
原型方式则利用了javascript面向对象中一个很独特的性质——类型的原型(prototype),它可以动态的扩展相应类型的属性和方法。
[javascript] 
//原型方式,利用javascript对象的prototype属性 
 functionNewClassType3(){}; 
 NewClassType3.prototype.attribute3= 1; 
 Vart3 = new NewClassType3(); 
 t3.attribute3+= 2; 
 alert("t3.attribute3= " + t3.attribute3); 
 //->t3.attribute3= 3 

原型方式中的原型概念需要理解一下。从上面几个例子中可以看出javascript的类型是以函数形式定义的,其名称为类型名称。而javascript每个类型都具备一个prototype属性,这个属性返回对象类型原型的引用,它是一个对象。我们可以将原型看做是一个参照,当我们创建一个类型的实例时,浏览器会自动将原型(prototype)的内容(属性和方法)附加到object上。此外,javascript对象是动态的,故而原型也是动态的。我们对原型(prototype)进行扩展,将改变类型的原型,这种改变将直接作用到这个原型创建的所有对象上。
下面代码展现了扩展原型的属性(要进行初始化操作)和方法。
[javascript]
/*
 * 使用构造函数形式创建类型
 */ 
functionType1(name){ 
          this.name= name; 

 
//new一个Type1实例 
varobj1 = new Type1("chwd"); 
alert(obj1.name); 
//->chwd 
alert(obj1.age); 
//->undefined 
 
//对Type1的原型中增加一个属性age,记得要赋值 
Type1.prototype.age; 
alert(obj1.age); 
//->undefined 
Type1.prototype.age= 18; 
alert(obj1.age); 
//->18 
obj1.age+= 8; 
alert(obj1.age); 
//->21 
 
//对类型Type1的原型增加一个方法 
Type1.prototype.showYourNameAndAge= function(name){ 
          this.name= name; 
          alert("myname is " + name + " and my age is " + this.age); 
}; 
//对象obj1调用showYourNameAndAge方法 
obj1.showYourNameAndAge("cweid"); 
//->myname is cweid and my age is 26 
上文展示了对一个类型的原型进行扩展后,之前建立的此类型的实例也相应发生了变化。既然原型是一个对象,那能否对类型的原型进行复制,以期改变类型的整个原型结构呢?是可以的,如下代码所示。
[javascript]
/*
          * 使用构造函数形式创建类型
          */ 
         functionType1(name){ 
                   this.name= name; 
         } 
         
         //new一个Type1实例 
         varobj1 = new Type1("chwd"); 
         alert(obj1.name); 
         //->chwd 
         
         //对类型Type1的原型增加一个方法 
         Type1.prototype.showYourNameAndAge= function(name){ 
                   this.name= name; 
                   alert("myname is " + name ); 
         }; 
         //对象obj1调用showYourNameAndAge方法 
         obj1.showYourNameAndAge("chenwd"); 
         //->myname is chenwd 
         
         
         /*
          * 再创建一个类型Type2
          */ 
         functionType2(){ 
                   this.age= 26; 
         } 
         //new一个Type2实例 
         varobj2 = new Type2("chweidong"); 
         alert(obj2.name); 
         //->undefined 
         //对象obj2调用showYourNameAndAge方法 
//      obj2.showYourNameAndAge("cwdong"); 
         //->undefined 
         
         //将Type2的原型设置为Type1的原型 
         Type2.prototype =Type1.prototype; 
         //再次显示obj2的name 
         alert(obj2.name); 
         //->undefined 
         varobj3 = new Type2("chenweid"); 
         alert(obj3.name); 
         //->undefined 
         
         //将Type2的原型设置为对象obj1 
         Type2.prototype= obj1; 
         //第三次显示obj2的name 
         alert(obj2.name); 
         //->undefined 
         alert(obj2.age); 
         //->26 
         varobj4 = new Type2("hahahaha"); 
         alert(obj4.name); 
         //->chenwd 
         alert(obj4.age); 
         //->26 
         obj4.showYourNameAndAge("chenweidong"); 
         //->myname is chenweidong 
  

上文代码说明对类型的prototype属性赋的值必须为对象,且不能将另一个类型的原型做为值。这种赋值方式虽然修改了prototype,但对并不影响之前建立的实例(需要重新建立实例,如obj4),不过从obj4的运行结果可以看出这种赋值方式是对原有类型扩展而非覆盖。

在上述javascript创建类型和利用prototype属性进行扩展的基础上,我们可以简单了解到prototype.js这个javascript框架的实现原理。prototype.js是对标准javascript库的扩展。它扩展了Object、Number、Function、String等类型,并且定义了一些新对象和类型,如Prototype对象、Class对象和Ajax对象等等,同时封装了javaScript的Ajax应用。Prototype.js的这些扩展极大的方便了开发人员创建高交互性的web2.0应用。
 
此框架大多是对原生对象功能的扩充,但它却是其他javascript框架的基础,可以说是鼻祖级的框架。下面体会下prototype.js对javascript扩展后是如何创建类型的。
 
在prototype.js中增加了Class对象,其方法create能够创建新类型,其语法为:
create([superclass][, methods...])
1.6版本后Class.create方法有两个参数,第一个参数指定待创建类的父类,如果没有父类对象传入,则默认对象为Object。以下代码展示了Class.create的用法。
[javascript] 
//createclass---Animal ,it can speak 
     varAnimal = Class.create({ 
               initialize:function(name,sound){ 
                        this.name= name; 
                        this.sound= sound; 
               }, 
               speak:function(){ 
                        alert(this.name+ " says: " + this.sound + "!"); 
               } 
     }); 
     
     //体验initialize方法 
     //varanimal = new Animal("animal1" , "bark"); 
     //animal.speak(); 
     //->animal1says:     bark! 
     
     //创建子类 
     varDog = Class.create( 
               Animal, 
               { 
                        initialize:function($super,name){ 
                                 $super(name,"hahah"); 
                        } 
               } 
     ); 
     vardog1 = new Dog("dog1","bark,bark"); 
     dog1.speak(); 
     //->dog1says: hahah! 
      
上文展示的是prototype1.6及以后版本的创建方法,而在1.6之前采用的javascript 的prototype属性以及prototype.js扩展的Object.extend方法。它们之间大同小异,1.6以后的一大句即可将类或子类(继承)创建完毕,而1.6之前需要两句。代码如下所示:
[javascript] 
<head> 
<metahttp-equiv="Content-Type" content="text/html;charset=gb2312" /> 
<title>1.6以前创建类型的方式</title> 
<scriptsrc="prototype-1.5.1.2.js"></script> 
</head> 
<script> 
         //createclass---Animal ,it can speak 
         varAnimal = Class.create(); 
         Animal.prototype= { 
                   initialize:function(name,sound){ 
                            this.name= name; 
                            this.sound= sound; 
                   }, 
                   speak:function(){ 
                            alert(this.name+ " says: " + this.sound + "!"); 
                   } 
         }; 
         
         //体验initialize方法 
         varanimal = new Animal("animal1" , "bark"); 
         animal.speak(); 
         //->animal1says:     bark! 
         
         //创建子类 
         varDog = Class.create(); 
         Dog.prototype= Object.extend( 
                   newAnimal(), 
                   { 
                            initialize:function(name){ 
                                     this.name= name; 
                                     this.sound= "hahah"; 
                            } 
                   } 
         ); 
         vardog1 = new Dog("dog1","bark,bark"); 
         dog1.speak(); 
         //->dog1says: hahah! 
         
</script> 
  
至此本文简单陈述了javascript高级应用中的类型创建方式,及其prototype属性的部分性质,并由此属性简单介绍了prototype.js及其创建和类继承的方式。揭示出prototype.js是鼻祖级javascript框架,这类框架在工作生产中能极大程度的提高开发效率。