Javascript中创建对象总结以备不时之需

 

1  /*
  2  *一.工厂方式：
  3  */
  4 
  5  // v1:
  6 
  7  var  oCar  =   new  Object；
  8  oCar.color = " red " ;
  9  oCar.doors = 4 ;
 10  oCar.mpg = 23 ;
 11  oCar.showColor = function (){
 12      alert( this .color);
 13  }
 14 
 15  // v2:
 16  function  createCar(){
 17       var  oTempCar =   new  Object;
 18      oTempCar.color = " red " ;
 19      oTempCar.doors = 4 ;
 20      oTempCar.mpg = 23 ;
 21      oTempCar.showColor = function (){
 22          alert( this .color);
 23      };
 24 
 25       return  oTempCar;
 26  }
 27 
 28  var  oCar1 = createCar();
 29  var  oCar2 = createCar();
 30 
 31  // v3:
 32  function  createCar(sColor,iDoors,iMpg){
 33       var  oTempCar  =   new  Object;
 34      oTempCar.color = scolor;
 35      oTempCar.doors = iDoors;
 36      oTempCar.mpg = iMpg;
 37      oTempCar.showColor = function (){
 38          alert( this .color);
 39      };
 40       return  oTempCar;
 41  }
 42 
 43  // 每个对象都有自己的showColor()版本，而每个对象都共享同一个函数
 44  var  oCar1 = createCar( " red " , 4 , 23 );
 45  var  oCar2 = createCar( " blue " , 3 , 25 ); 
 46  oCar1.showColor();
 47  oCar2.showColor();
 48 
 49 
 50  // v4:
 51 
 52  function  showColor(){
 53      alert( this .color);
 54  }
 55 
 56  function  createCar(sColor,iDoors,iMpg){
 57       var  oTempCar  =   new  Object;
 58      oTempCar.color = sColor;
 59      oTempCar.doors = iDoors;
 60      oTempCar.mpg = iMpg;
 61      oTempCar.showColor = showColor;
 62       return  oTempCar;
 63  }
 64 
 65  var  oCar1 = createCar( " red " , 4 , 23 );
 66  var  oCar2 = createCar( " blue " , 3 , 25 ); 
 67  oCar1.showColor();
 68  oCar2.showColor();
 69 
 70 
 71  /*
 72  *二.构造函数方式:
 73  */
 74  function  Car(sColor,iDoors,iMpg){
 75       this .color = sColor;
 76       this .doors = iDoors;
 77       this .mpg = iMpg;
 78       this .showColor = function (){
 79          alert( this .color);
 80      };
 81  }
 82 
 83  var  oCar1 = new  Car( " red " , 4 , 23 );
 84  var  oCar2 = new  Car( " blue " , 3 , 25 );
 85 
 86  // 构造函数内部没有创建对象，而是使用this关键字
 87  // 使用new关键符调用构造函数
 88  // 缺点：构造函数会重复生成函数，为每个对象都创建独立的函数版本
 89 
 90 
 91  /*
 92  *三.原型方式:
 93  */
 94  function  Car(){
 95  }
 96 
 97  Car.prototype.color = " red " ;
 98  Car.prototype.doors = 4 ;
 99  Car.prototype.mpg = 23 ;
100  Car.prototype.showColor = function (){
101      alert( this .color);
102  };
103 
104  var  oCar1 = new  Car();
105  var  oCar2 = new  Car();
106 
107  // 缺点：构造函数无参数
108 
109 
110  /*
111  *四.混合的构造函数/原型方式(推荐使用):
112  */
113  function  Car(sColor,iDoors,iMpg){
114       this .color = sColor;
115       this .doors = iDoors;
116       this .mpg = iMpg;
117       this .drivers = new  Array( " Mike " , " Sue " );
118  }
119 
120  Car.prototype.showColor = function (){
121      alert( this .color);
122  };
123 
124  var  oCar1 = new  Car( " red " , 4 , 23 );
125  var  oCar2 = new  Car( " blue " , 3 , 25 );
126 
127  /*
128  *五动态原型方法:
129  */
130  function  Car(sColor,iDoors,iMpg){
131       this .color = sColor;
132       this .doors = iDoors;
133       this .mpg = iMpg;
134       this .drivers = new  Array( " Mike " , " Sue " );
135  }
136 
137  if ( typeof  Car._initialized  ==   " underfined " ){
138      Car.prototype.showColor = function (){
139          alert( this .color);
140      };
141      Car._initialized = true ;
142  }
143

一个使用混合使用构造函数/原型方式的例子

 1  function  Lecture(name,teacher){
 2           this .name = name;
 3           this .teacher = teacher;
 4      }
 5 
 6      Lecture.prototype.display = function (){
 7           return   this .teacher  +   "  is teacher  "   +   this .name;
 8      }
 9 
10       // array of lectures
11       function  Schedule(lectures){
12           this .lectures = lectures;
13      }
14      
15      Schedule.prototype.display = function (){
16           var  str = "" ;
17 
18           for ( var  i = 0 ;i < this .lectures.length;i ++ ){
19              str += this .lectures[i].display() + "" ;
20          }
21 
22           return  str;
23      }
24      
25       // 用new()创建实例
26       var  mySchedule = new  Schedule([
27           new  Lecture( " Gye " , " Mr.Smith " ),
28           new  Lecture( " Math " , " Mrs.Jones " ),
29           new  Lecture( " English " , " TBD " )
30      ]);
31 
32      alert(mySchedule.display());