ECMAScript面向对象——之继承

Posted 2020-09-19

1.原型链方式

主要利用原型对象，让引用类型A的的prototype属性指向另一个引用类型的实例，从而继承另一个引用类型的属性和方法。

问题
1.无法在创建子类的时候向父类的构造函数传递参数
2.父类中有引用类型的属性的话，只要子类实例中有操作，所有的都会受到影响

 function Annimal(c){
     this.annimalClass=c;
     this.eat=function(){
         console.log(‘eatting.....‘);
     };
   this.runing=function(){
       console.log(‘runing.............‘);
   };
 }

// sub
function Felidae(ftype){
    this.Ftype=ftype;
}

// 先继承
Felidae.prototype=new Annimal("Felidae");

// 再添加或重写父类的方法
Felidae.prototype.like=function(h){
    console.log(h);
}

// 使用

var cat=new Felidae("cat");

// 从父类继承了runing方法
cat.runing();　　

　　2.借用构造函数

利用函数的父函数call方法实现继承。

问题：
1.子类可以继承父类在构造函数中定义的属性和方法，但是方法无法复用
2.但是父类在原型中定义的属性和方法对子类是不可见的

// 借用构造函数
function SuperType(){
    this.arr=[1,2,3];
}

SuperType.prototype.show=function(){
    console.log(this.arr);
}

function SubType(){
    SuperType.call(this);
}

 var sub1=new SubType();
 sub1.arr.pop();
 console.log(sub1.arr);//[1,2]
 var sub2=new SubType();
  sub2.arr.push(20);
 console.log(sub2.arr);//[1,2,3,20]

 // 子类可以继承父类在构造函数中定义的属性和方法
 // 但是父类在原型中定义的属性和方法对子类是不可见的
 sub1.show();//sub1.show is not a function

 var sup1=new SuperType();
 sup1.show();//[1,2,3]

3.组合继承（原型链+构造）

function SuperType(fname){
    this.fileName=fname;
    this.arr=[1,2,3];
}

SuperType.prototype.show=function(){
    console.log(this.arr);
}

// 继承
function SubType(fname,size){
    SuperType.call(this,fname);//构造函数
    this.size=size;
}

// 原型继承
SubType.prototype = new SuperType();
SubType.prototype.constructor=SubType;
//添加新方法
SubType.prototype.showF=function(){
 console.log("name:"+this.fileName+"\r\n"+"size:"+this.size+"kb");
};

var sub1=new SubType("todo.txt",512);
   sub1.show();
   sub1.showF();

  console.log(sub1 instanceof SubType);//true
  console.log(sub1 instanceof SuperType);//true
  console.log(sub1 instanceof Object);//true

4.原型式继承

使用一个已存在的实例对象作为，子类的原型对象。

// 原型式继承
// 用于在一个已有的对象实例上拓展新的方法
 function object(o){
    function F(){}
     F.prototype=o;
     F.prototype.show=function(){
         for ( var agr in o){
             console.log(agr);
         }
     }
     return new F();
 }
 var p={
     arr:[1,2,3],
     name:"done"
 }

var p1=object(p);
 p1.show();

 var p2=object(p);
 p2.arr.pop();
 console.log(p2.arr);
 console.log(p1.arr);

5.寄生继承

// 寄生式继承
 function createAn(o){

     var onew = object(o);//沿用上面的原型式继承的object函数
     onew.show1=function(){//添加自己的方法
         console.log("show1......");
     };

     return onew;
 }

var a1=createAn(p);
    a1.show1();

6.寄生组合继承（寄生+构造+原型链）

使用寄生式继承来继承超类的原型，然后将结果指定给子类的原型。

// 寄生组合式继承
//与原型构造组合类似，知识这里使用了一个寄生函数来实现原型链继承
//
// 用寄生的方式将【原型构造组合】下面的包装起来，使用的时候用下面的函数替换掉组合继承里面的代码即可
// SubType.prototype = new SuperType();
// SubType.prototype.constructor=SubType;

 inheritProto(SubType,SuperType)
 {
      var proto=object(SuperType.prototype);//用父类的原型创建一个新的对象
       proto.prototype.constructor=SubType;
       SubType.prototype=proto;
 }