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>");
以上内容,如有错误请指出,不甚感激。