代码改变世界

JavaScript的类的实现

2009-06-18 22:56  敏捷的水  阅读(486)  评论(0编辑  收藏  举报

工厂方式

对象的属性可以在对象创建后定义,所以我们常常写如下的代码。

   1: var oProduct=new Object;
   2: oProduct.name="IPhone";
   3: oProduct.color="black";
   4: oProduct.screen=3.5;
   5: oProduct.showColor=function(){
   6:     alert(this.color);
   7: };

但这只能创建一个实例,我们如何创建多个实例呢?

   1: function createProduct(){
   2:     var oProduct=new Object;
   3:     oProduct.name=""IPhone";
   4:     oProduct.coloer="black";
   5:     oProduct.screen=3.5;
   6:     oProduct.showColor=function(){
   7:         alert(this.color);
   8:     };
   9:     
  10:     return oProduct;
  11: };
  12:  
  13: var oProductA=createProduct();
  14: var oProductB=createProduct();

当然,上面的createProduct函数可以接收参数,从而让不同的对象具有不同的属性。但是,上面的每个对象都有自己的showColor函数,实际上他们可以同一个函数。我们可以改为如下。
   1: function showColor()
   2: {
   3:     alert(this.color);
   4: }
   5: 然后,createProduct里的showColoer改为oProduct.showColor=showColoer

上面的代码问题是函数看起来不像对象的方法。

构造函数方式

   1: function  Product(sName,sColor,nScreen){
   2:     this.name=sName;
   3:     this.color=sColor;
   4:     this.screen=nScreen;
   5:     this.showColor=function(){
   6:            alert(this.color);
   7:     };
   8: }
   9: var oProductA=new Product("IPhone","black","3.5");
  10: var oProductB=new Product("Palm","Golden","3.5");

同样,共享函数问题,可以向工厂方法一样改进。

原型方法

   1: function Product(){};
   2: Product.prototype.name="IPhone";
   3: Product.prototype.color="Black";
   4: Product.prototype.screen="3.5";
   5: Product.prototype.showColor=function(){
   6:     alert(this.color);
   7: };
   8:  
   9: var oProductA=new Product();
  10: var oProductB=new Product();

原型方法的问题,是不能接受参数,原型方法定义的属性和方法我的理解是想C#里的静态属性和静态方法。

混合构造函数和原型方式

   1: function Product(sName,sColor,nScreen){
   2:     this.name="IPhone";
   3:     this.color="Black";
   4:     this.screen="3.5";
   5:     this.Factories=new Array{"IBM","DELL"};
   6: };
   7: Product.prototype.showColor=function(){
   8:     alert(this.color);
   9: };
  10:  
  11: var oProductA=new Product("IPhone","black",3.5);
  12: var oProductB=new Product("Palm","Golden",4);
  13:  
  14: oProductA.Factories.push("HP");
  15: alert(oProductA.Factories); //outputs: IBM,DELL,HP
  16: alert(oProductB.Factories); //outputs: IBM,DELL

动态原型方法

   1: function Product(sName,sColor,nScreen){
   2:     this.name="IPhone";
   3:     this.color="Black";
   4:     this.screen="3.5";
   5:     this.Factories=new Array{"IBM","DELL"};
   6:     if(typeof Car._initialized=="undefined"){
   7:           Product.prototype.showColor=function(){
   8:                 alert(this.color);
   9:           };      
  10:     }    
  11: };
  12:  
  13: var oProductA=new Product("IPhone","black",3.5);
  14: var oProductB=new Product("Palm","Golden",4);
  15:  
  16: oProductA.Factories.push("HP");
  17: alert(oProductA.Factories); //outputs: IBM,DELL,HP
  18: alert(oProductB.Factories); //outputs: IBM,DELL

混合工厂方法

   1: function  Product(sName,sColor,nScreen){
   2:     var oProduct=new Object;
   3:     oProduct.name=sName;
   4:     oProduct.color=sColor;
   5:     oProduct.screen=nScreen;
   6:     oProduct.showColor=function(){
   7:         alert(this.color);
   8:     };
   9:     
  10:     return oProduct;
  11: }
  12:  
  13: var oProductA=new Product(new Product("IPhone","black","3.5");

通过上面的分析,本人更喜欢使用动态原型方法