3

前言:JS之理解原型和原型链,几种常见的继承方式介绍


1.call继承,也叫借用构造函数伪造对象或是经典继承call继承回把父类的私有属性和方法继承给子类私有;父类公有属性(原型上的属性)无关。当然这里的call也可以用apply

//父类F     //子类S
function S(){
  F.call(this)   
}//原理就是改变F中的this指向,指向S的实例,子类会获得父类F的私有属性和方法

2.原型链继承:在1中通过call继承到了父类的私有属性和私有方法。下一步就是有共有属性和方法。原型链继承把父类私有和公有的属性,都给了子类公有,子类的原型作为父类的实例。原型链继承会使得父类的私有属性在子类的私有和公有都得到继承。

function S(){};
//把子类公有的作为父类的实例;
S.prototype=new F;
 let  s=new S;

3.冒充继承:通过遍历父类的属性,把父类私有+公有的的属性都给了子类私有。for in循环,只能遍历自定义的属性和方法;拿不到系统的属性和方法,例如constructor

   function S(){ 
     for(var attr in f){
       this[attr]=f[attr];}}
    let s=new S;

4.混合继承1call继承+原型链继承;子类私有中有父类私有的,子类公有也有父类私有;;

 //子类私有继承父类私有;
 function S(){ F.call(this)};
  
 //子类公有继承父类私有——公有 
 S.prototype=new F;
 let s=new S;

5.混合继承2call继承+拷贝继承(extend),通过extend方法遍历父类原型上的方法,并复制给子类的原型。

   //子类私有继承父类私有;
   function S(){F.call(this);}
   
   //通过extend方法进行拷贝继承公有
   extend(S.prototype, F.prototype);
   let s=new S;

   //extend方法
   function extend(obj2,obj1){
      for(var attr in obj1){
       obj2[attr]=obj1[attr]}

6.混合继承3call继承+Object.create(),这也是ES6class继承extends的原理,点这

//子类私有继承父类私有;
 function S(){F.call(this)}
    
 S.prototype =  Object.create(F.prototype,{constructor:{value:S}})   
    
 //Object.create()原理   
 function Tmp(){};
 Tmp.prototype= F.prototype;
 S.prototype=new Tmp;
 S.prototype.constructor=S;
 //*********

 let  s=new S;

目前比较常用的是混合继承2和混合继承3,子类能很清晰的继承父类的公有和私有。


何凯
966 声望174 粉丝

Never too late to learn!