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>
结果如图:
以雷霆击碎黑暗