首页 > 代码库 > js继承

js继承

2024-09-05 03:02:24   217人阅读

网上看了很多人写的继承，都写得很好，有些对于初学者可能比较难理解或者比较乱，先从简单入门，下面是重新整理了一下，不乏有网上其他人的影子

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8 
 9 
10 
11 <script type="application/javascript">
12 ////////////继承/////////////////////////
13 //动物
14 function animal(name,color,age){
15     this.type = "动物"; //定义公共使用的属性
16     this.name = name;
17     this.color = color;
18     this.age = age;
19 }
20 //猫
21 function cat(name,color){
22     animal.apply(this,arguments);//apply继承，可以使用arguments
23 }
24 //使用1
25 var cat = new cat("cat","red",13);
26 console.info(cat.name,cat.type,cat.age);
27 
28 //猪
29 function pig(name,color,age){
30     animal.call(this,name,color,age);//call不可以用arguments
31 }
32 //使用2
33 var pig = new pig("pig","black",12);
34 console.info(pig.name,pig.type,pig.age);
35 
36 //狗
37 function dog(name,color,age){
38 
39 }
40 //有参数就不能使用prototype原型继承的方式了，下面这个是错误的，得不到结果
41 dog.prototype = new animal();
42 //dog.prototype = new animal(‘xx‘,‘ds‘,21); //这种也只是赋值
43 
44 //使用3
45 var dog = new dog("dog","rex",23);
46 console.info(dog.name,dog.type,dog.age);
47 
48 function animal2(){
49     this.type = "第二类动物"
50 }
51 //二狗
52 function dog2(){
53 
54 }
55 //这次使用prototype
56 dog2.prototype = new animal2();
57 dog2.prototype.constructor = dog2;
58 
59 var dog2 = new dog2();
60 console.info(dog2.type);
61 
62 
63 
64 
65 </script>
66 
67 </body>
68 </html>

结果如图：

技术分享 

js继承


联系
我们