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]); 就可以了。
时间： 2024-12-14 04:29:17