JS_原型和继承之小案例

原型和继承所谓晕晕乎乎，迷迷糊糊。

毕竟概念什么的东西看起来又拗口又悬乎，建议还是多应用到自己的代码中去，没事的时候多封装几个对象，函数。多敲敲。

所谓熟能生巧颇有此意。

原型：组合使用构造函数和原型模式、动态原型模式、寄生构造函数模式、稳妥构造函数模式。（本文只实现了第一个和第三个（或者说是工厂模式））

[PS:一直都不懂工厂模式和寄生构造函数模式的区别，求高手指导]

继承：借用构造函数、组合继承、原型式继承、寄生式继承、寄生组合式继承（本文只实现了寄生组合式继承）

下面贴代码

继承：

 1 function Person(name,age){
 2             this.name = name;
 3             this.age = age;
 4             // this.showInfo = function(){
 5             //     alert("my name is "+this.name+",my age is "+this.age)
 6             // }
 7         }
 8 
 9         Person.prototype.showInfo =function(){
10             alert("my name is "+this.name+",my age is "+this.age)
11         }
12 
13         function Student(name,age,grade){
14             Person.call(this,name,age);
15             this.grade = grade;
16             // this.showGradee = function(){
17             //     alert("my grade is "+this.grade);
18             // }
19         }
20 
21         Student.prototype = new Person();
22 
23         //一定要放在后面，详细了解原型的实现机制
24         Student.prototype.showGrade = function(){
25             alert("my grade is "+this.grade);
26         }
27 
28         var stu = new Student("mary",12,3);
29 
30         alert(stu.name);
31         alert(stu.age);
32         stu.showInfo();
33 
34         alert(stu.grade);
35         stu.showGrade();

原型：

  1 var content = document.getElementById("content");
  2 
  3          //工厂模式---寄生式模式
  4          function createCar(brand,color,price){
  5              var car = new Object();
  6              car.brand =  brand;
  7              car.color = color;
  8              car.price = price;
  9 
 10              //匿名函数，showInfo是一个指针，指向该函数
 11              car.showInfo = function(){
 12                  content.innerHTML+=("工厂模式---寄生式模式："+this.brand+"-"+this.color+"-"+this.price+"<br>");
 13              }
 14 
 15              car.run = function(){
 16                  content.innerHTML+=("工厂模式---寄生式模式："+this.brand+"-"+this.color+"-正在奔驰！<br>");
 17              }
 18 
 19              car.toString = function(){
 20                  return this.brand+"-"+this.color+"-"+this.price;
 21              }
 22 
 23              return car; 
 24          }
 25 
 26          function carSort(carA,carB){
 27              if(carA instanceof Object && carB instanceof Object){
 28                  if(carA.brand != carB.brand){
 29                      if(carA.brand<carB.brand){
 30                          return -1;
 31                      }
 32                      else if(carA.brand>carB.brand){
 33                          return 1;
 34                      }
 35                  }
 36                  else{
 37                      if(carA.price<carB.price){
 38                          return 1;
 39                      }
 40                      else if(carA.price>carB.price){
 41                          return -1;
 42                      }
 43                      else{
 44                          return 0;
 45                      }
 46                  }
 47              }
 48              else{
 49                  return;
 50              }
 51          }
 52 
 53          var arr1 = new Array();
 54          var carA = createCar("bmw","red","300000");
 55          arr1.push(carA);
 56          carA.showInfo();
 57          carA.run();
 58 
 59          var carB = createCar("bmw","red","200000");
 60          arr1.push(carB);
 61          carB.showInfo();
 62          carB.run();    
 63 
 64          var carC = createCar("abc","black","100000");
 65          arr1.push(carC);
 66          carC.showInfo();
 67          carC.run();    
 68 
 69          arr1.sort(carSort);
 70          content.innerHTML+=("排序之后的结果是"+arr1+"<br><br>")
 71 
 72 
 73          //构造函数
 74          function Car(brand,color,price){
 75              this.brand = brand;
 76              this.color = color;
 77              this.price = price;
 78 
 79              this.showInfo = function(){
 80                  content.innerHTML+=("构造函数："+this.brand+"-"+this.color+"-"+this.price+"<br>");
 81              }
 82 
 83              this.run = function(){
 84                  content.innerHTML+=("构造函数："+this.brand+"-"+this.color+"-正在奔驰！<br>");
 85              }
 86 
 87              this.toString = function(){
 88                  return this.brand+"-"+this.color+"-"+this.price;
 89              }
 90 
 91          }
 92 
 93          var arr2 = [];
 94          var carD = new Car("bmw","red","300000");
 95          arr2.push(carD);
 96          carD.showInfo();
 97          carD.run();
 98 
 99          var carE = new Car("bmw","red","200000");
100          arr2.push(carE);
101          carE.showInfo();
102          carE.run();    
103 
104          var carF = new Car("abc","black","100000");
105          arr2.push(carF);
106          carF.showInfo();
107          carF.run();    
108 
109          arr2.sort(carSort);
110          content.innerHTML+=("排序之后的结果是"+arr2+"<br><br>");
111 
112          //组合使用构造函数和原型
113          function Cars(brand,color,price){
114              this.brand = brand;
115              this.color = color;
116              this.price = price;
117          }
118 
119          Cars.prototype = {
120              constructor:Cars,
121              showInfo:function(){
122                  content.innerHTML+=("组合使用构造函数和原型："+this.brand+"-"+this.color+"-"+this.price+"<br>");
123              },
124              run : function(){
125                  content.innerHTML+=("组合使用构造函数和原型："+this.brand+"-"+this.color+"-正在奔驰！<br>");
126              },
127              toString : function(){
128                  return this.brand+"-"+this.color+"-"+this.price;
129              }
130          }
131 
132          var arr3 = [];
133          var carG = new Cars("bmw","red","300000");
134          arr3.push(carG);
135          carG.showInfo();
136          carG.run();
137 
138          var carH = new Cars("bmw","red","200000");
139          arr3.push(carH);
140          carH.showInfo();
141          carH.run();    
142 
143          var carI = new Cars("abc","black","100000");
144          arr3.push(carI);
145          carI.showInfo();
146          carI.run();    
147 
148          arr3.sort(carSort);
149          content.innerHTML+=("排序之后的结果是"+arr3+"<br><br>");

以上内容，如有错误请指出，不甚感激。