JS封装继承函数

Posted

tags:

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

 1 function extend(child,parent){
 2     var F=function(){}
 3     F.prototype=parent.prototype;
 4     child.prototype=new F();
 5     child.prototype=child;
 6     child.uber=parent.prototype; //uber指向父对象的原型。方便子对象调用父对象原型中的重写的方法。
 7 }
 8 function Shape(){}
 9 Shape.prototype.name="Shape";
10 Shape.prototype.color="blue";
11 
12 function circle(radius){
13     this.radius=radius;
14 }
15 
16 circle.prototype.name="circle";
17 circle.prototype.getS=function(){
18     return this.radius*this.radius*3.14;
19 }
20 extend(circle,Shape);
21 
22 var cir=new circle(2);
23 alert(cir.name);   //"circle"
24 alert(cir.color);    //"blue"
25 alert(cir.uber.name);    //"Shape"
26 alert(cir.getS()) //"12.56"


 extend函数的第一个参数是子构造器,第二个参数是父构造器;

为什么子构造器的原型对象不直接指向父构造器的原型对象,是因为若child.prototype=parent.prototype,则会出现父子的原型对象绑定在一起,即父子的原型对象的引用相等,相当于指向同一个地址,改变子对象的原型,父对象的原型也会随之改变, 若遍历父对象的原型和子对象的原型,发现两个完全相同个。

 

 

 1 var cir=new circle(2);
 2 var shape1=new Shape();
 3 cir.prototype.name="this is circle";
 4 
 5 
 6 for(var i in shape1){
 7      if(!shape1.hasOwnProperty(i)){  //遍历非实例属性
 8          console.log(i+":"+shape1[i]);
 9      }
10 }
11 
12 //name:circle
13 //color:blue
14 //getS:function (){
15     return this.radius*this.radius*3.14;
16 }
17 
18 
19 for(var i in cir){
20      if(!cir.hasOwnProperty(i)){
21         console.log(i+":"+cir[i]);
22      }
23 }
24 
25 //name:circle
26 //color:blue
27 //getS:function (){
28     return this.radius*this.radius*3.14;
29 }.

以上是关于JS封装继承函数的主要内容,如果未能解决你的问题,请参考以下文章

回归 | js实用代码片段的封装与总结(持续更新中...)

JS面向对象三大特征:封装、继承、多态

JS封装继承函数

js 封装类实现原型继承

java中封装,继承,多态,接口学习总结

js-6