js继承

Posted 卓源君

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js继承相关的知识,希望对你有一定的参考价值。

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

 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继承的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段9——JS中的面向对象编程

js代码片段: utils/lcoalStorage/cookie

JS代码片段:一个日期离现在多久了

js常用代码片段(更新中)

js常用代码片段

Chrome-Devtools代码片段中的多个JS库