标签：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 7 </head> 8 <script> 9 //中学生 10 function MidStu(name,age){ 11 this.name=name; 12 this.age=age; 13 14 this.show=function(){ 15 window.alert(this.name+"年龄是"+this.age); 16 } 17 this.pay=function(fee){ 18 window.alert("你的学费是"+fee*0.8); 19 } 20 } 21 //小学生 22 function Pupil(name,age){ 23 this.name=name; 24 this.age=age; 25 26 this.show=function(){ 27 windwo.alert(this.name+"年龄是"+this.age); 28 } 29 this.pay=function(fee){ 30 window.alert("你的学费是"+fee*0.5); 31 } 32 } 33 </script> 34 </html> 35 </script> 36 </body> 37 </html>
上面代码的问题就是太多重复代码。而继承就是这类问题的解决之道。当多个类存在相同的属性（变量）和方法时，可以从这些类中抽象出父类，在父类中定义这些相同的属性和方法，所有的子类不需要重新定义这些属性和方法。js中可以通过如下方式实现。
1.
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 7 </head> 8 <script> 9 //修改如下： 10 //1.把子类中共有的属性和方法抽取出，定义一个父类stu 11 function Stu(name,age){ 12 this.name=name; 13 this.age=age; 14 15 this.show=function(){ 16 window.alert(this.name+"年龄是="+this.age); 17 } 18 } 19 //2.通过对象冒充来继承父类的属性的方法 20 function MidStu(name,age){ 21 this.stu=Stu; //将Stu构造函数（类），赋给MidStu的属性 this.stu 22 this.stu(name,age); //这里相当于调用Stu(name,age);完成初始化（这句话必须有，否则不能实现继承效果） 23 //接下来写MidStu自己的方法 24 this.pay=function(fee){ 25 window.alert("你的学费是"+fee*0.8); 26 } 27 } 28 function Pupil(name,age){ 29 this.stu=Stu; 30 this.stu(name,age); 31 this.pay=function(fee){ 32 window.alert("你的学费是"+fee*0.5); 33 } 34 } 35 //测试 36 var midstu=new MidStu("大明",15); 37 var pupil=new Pupil("小明",12); 38 midstu.show(); 39 midstu.pay(100); 40 pupil.show(); 41 pupil.pay(100); 42 </script> 43 </html> 44 </script> 45 </body> 46 </html>
2.通过call方法。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 7 </head> 8 <script> 9 //修改如下： 10 //1.把子类中共有的属性和方法抽取出，定义一个父类stu 11 function Stu(name,age){ 12 this.name=name; 13 this.age=age; 14 15 this.show=function(){ 16 window.alert(this.name+"年龄是="+this.age); 17 } 18 } 19 //2.通过对象冒充来继承父类的属性的方法 20 function MidStu(name,age){ 21 //这里这样理解：通过call修改了Stu构造函数的this指向，让他指向了调用者本身。 22 Stu.call(this,name,age); 23 this.pay=function(fee){ 24 window.alert("你的学费是"+fee*0.8); 25 } 26 } 27 function Pupil(name,age){ 28 Stu.call(this,name,age); 29 this.pay=function(fee){ 30 window.alert("你的学费是"+fee*0.5); 31 } 32 } 33 //测试 34 var midstu=new MidStu("大明",15); 35 var pupil=new Pupil("小明",12); 36 midstu.show(); 37 midstu.pay(100); 38 pupil.show(); 39 pupil.pay(100); 40 </script> 41 </html> 42 </script> 43 </body> 44 </html>
3.通过apply实现。代码大部分相同，只是把上面的 Stu.call(this,name,age); 换成 Stu.apply(this,[name,age]); 就可以了。
标签：
原文地址：http://www.cnblogs.com/hezhi/p/4576705.html
