JS之理解繼承

caiyongji 發(fā)布于2019-08-20 18:29 / 1322人閱讀

摘要：父類子類原理就是改變中的指向，指向的實(shí)例，子類會(huì)獲得父類的私有屬性和方法原型鏈繼承在中通過(guò)繼承到了父類的私有屬性和私有方法。子類私有繼承父類私有原理目前比較常用的是混合繼承和混合繼承，子類能很清晰的繼承父類的公有和私有。

前言：JS之理解原型和原型鏈，幾種常見(jiàn)的繼承方式介紹

1.call繼承，也叫借用構(gòu)造函數(shù)、偽造對(duì)象或是經(jīng)典繼承。call繼承回把父類的私有屬性和方法繼承給子類私有；父類公有屬性（原型上的屬性）無(wú)關(guān)。當(dāng)然這里的call也可以用apply。

//父類F     //子類S
function S(){
  F.call(this)   
}//原理就是改變F中的this指向，指向S的實(shí)例，子類會(huì)獲得父類F的私有屬性和方法

2.原型鏈繼承：在1中通過(guò)call繼承到了父類的私有屬性和私有方法。下一步就是有共有屬性和方法。原型鏈繼承把父類私有和公有的屬性，都給了子類公有，子類的原型作為父類的實(shí)例。原型鏈繼承會(huì)使得父類的私有屬性在子類的私有和公有都得到繼承。

function S(){};
//把子類公有的作為父類的實(shí)例；
S.prototype=new F;
 let  s=new S;

3.冒充繼承:通過(guò)遍歷父類的屬性，把父類私有+公有的的屬性都給了子類私有。for in循環(huán)，只能遍歷自定義的屬性和方法；拿不到系統(tǒng)的屬性和方法，例如constructor；

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

4.混合繼承1：call繼承+原型鏈繼承；子類私有中有父類私有的，子類公有也有父類私有；；

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

5.混合繼承2：call繼承+拷貝繼承（extend），通過(guò)extend方法遍歷父類原型上的方法，并復(fù)制給子類的原型。

   //子類私有繼承父類私有；
   function S(){F.call(this);}
   
   //通過(guò)extend方法進(jìn)行拷貝繼承公有
   extend(S.prototype, F.prototype);
   let s=new S;

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

6.混合繼承3：call繼承+Object.create()，這也是ES6里class繼承extends的原理，點(diǎn)這。

//子類私有繼承父類私有；
 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，子類能很清晰的繼承父類的公有和私有。