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

Javascript中创建对象可归纳为三种方式：工厂函数、构造函数和原型方式。

工厂函数方式利用javascript基础类Object，对Object的一个实例增加相应的属性和方法以达到新类型所期望的结果。如下代码展示了类型NewClassType1含有一个属性attribute1。

   //工厂函数方式，返回特定类型的对象实例
         functionNewClassType1(){
                   varo = new Object();
                   o.attribute1= 3;
                   returno;
         }; 

获取NewClassType1类型的实例，类似于设计模式中的工厂方法，直接调用即可。如下代码展示获取NewClassType1的实例，及操作其attribute1属性的过程（其中“//->”后面展示了提示结果）。

         
         var t1 =NewClassType1();
         t1.attribute1+= 3;
         alert("t1.attribute1= " + t1.attribute1);
         //->t1.attribute= 6

构造函数方式创建class使用关键字this来建立类中属性或方法。使用new关键字来获取实例。

      
       //构造函数方式，用new获取特定类型的对象实例
         functionNewClassType2(){
                   this.attribute2= 2;
         };
         vart2 = new NewClassType2();
         t2.attribute2+= 6
         alert("t2.attribute2= " + t2.attribute2);
         //->t2.attribute2= 8 

原型方式则利用了javascript面向对象中一个很独特的性质——类型的原型（prototype），它可以动态的扩展相应类型的属性和方法。

        
        //原型方式，利用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）进行扩展，将改变类型的原型，这种改变将直接作用到这个原型创建的所有对象上。

下面代码展现了扩展原型的属性（要进行初始化操作）和方法。

       
         /*
          * 使用构造函数形式创建类型
          */
         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

上文展示了对一个类型的原型进行扩展后，之前建立的此类型的实例也相应发生了变化。既然原型是一个对象，那能否对类型的原型进行复制，以期改变类型的整个原型结构呢？是可以的，如下代码所示。

/*
          * 使用构造函数形式创建类型
          */
         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的用法。

    //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之前需要两句。代码如下所示：

<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框架，这类框架在工作生产中能极大程度的提高开发效率。