JS 繼承方式

原型鏈繼承

所謂原型鏈繼承，就是根據js原型鏈的特性而實現的一種繼承方式。原型鏈特性：每個函式都自帶有乙個prototype屬性指向該函式對應的原型物件，而原型物件又會有乙個屬性指向該函式。而通過new 建構函式出來的例項，會有乙個屬性指向原型物件。

1  //原型鏈繼承
2  function supertype(name)
6  supertype.prototype=
11  }
1213 var super1=new supertype('inherit');
14  super1.getmsg(); //inherit, kevin,paul
1516 function sub(age)
19 sub.prototype=new supertype();
20  sub.prototype.getmsg=function()
2324  var sub=new sub('prototype',22);
25  sub.friends.push('inherit');
26  console.log(sub.friends); //["kevin", "paul", "inherit"]
27  sub.getmsg();   //undefined, kevin,paul
28  var sub1=new sub(22);
29  console.log(sub1.friends); //["kevin", "paul", "inherit"]
30  sub1.getmsg();  //undefined, kevin,paul,inherit

從上面**的結果可以看出一些原型鏈繼承的弊端：

（1）子類的name屬性都是undefined。因為在建立子類例項時，無法向父類的建構函式傳遞引數。

（2）引用型別的屬性會被每個物件共享。如friends屬性。

call繼承

call繼承的實現：在子型別的建構函式中使用call方法呼叫呼叫父類的建構函式而實現繼承。

1  //call繼承
2  function supertype(name,age)
9  }
10  supertype.prototype=
15  }
16  function sub(name,age,***)
20  var sub=new sub('kevin',22,'male');
21  sub.friends.push('inherit');
22  for(var attr in sub)
25  sub.getmsg();  //此處報錯
26    var sub1=new sub('kkk',23,'female');
27  for(var attr in sub1)

call繼承可以由**看出很好地解決了原型鏈繼承的兩個問題。但call繼承也存在問題：由於call只執行了父類的建構函式，並沒有將父類的原型繼承到子類，所以父類在原型中的方法子類無法呼叫。若想通過call完成繼承，所有屬性和方法都只能寫在建構函式內，但方法寫在建構函式內則意味著方法不被共享，會造成記憶體浪費的現象。

混合繼承

混合繼承：由上述兩種繼承方式組成而成。

// 混合繼承
1  function supertype(name)
5  supertype.prototype=
10  }
1112  function subtype(name)
15  subtype.prototype=new supertype();
16  var sub=new subtype('inherit');
17  sub.friends.push('kevin');
18  sub.getmsg(); //inherit, paul,kevin
1920  var sub1=new subtype('inherit1');
21  sub1.getmsg(); //inherit1, paul

混合繼承很好地解決了上述兩種繼承方式的缺點，該繼承方式為最常用的js繼承方式；該繼承方式的缺點便是：封裝性較差。

冒充物件繼承

冒充物件原理便是在子類建構函式中通過乙個臨時變數來儲存父類的例項，由於例項會有乙個屬性指向原型函式，所以父類的屬性和方法便被繼承過來。然後通過物件複製的方式將臨時變數中的屬性和方法複製到子類物件中。

1   //冒充物件繼承
2  function a(name)
6  a.prototype=
10  }
1112  function b(name,age)
17    this.age=age;
18    temp=null;
19  }
2021  var b = new b('a',2);
22  console.log(b.age);
23  b.friends.push('kevin');
24  b.getmsg();
2526  var b1 = new b('b',2);
27  b1.getmsg();

寄生式繼承

寄生式繼承的思路：通過object.create()方法來實現繼承，但由於該方法存在相容性問題，需要在ie9以下以及低版本的現代瀏覽器進行相容性處理。

1  // 寄生式繼承
23  //相容性處理；
4  object.prototype.create=function(obj)else;
9        f.prototype=obj;
10        return new f();
11    }
12  }
1314  function a(name)
18  a.prototype=
23  }
2425  var b = object.create(new a('kevin'));
26  b.friends.push('abc');
27  b.getmsg();  // kevin, paul,abc
2829  var c = object.create(new a('wow'));
30  c.getmsg(); //wow, paul

寄生繼承的方式快速簡便，直接通過object.create()便可完成繼承。缺點是存在相容性的問題。

JS 繼承方式

js 繼承方式

js繼承方式

JS繼承方式

JS 繼承方式

js 繼承方式

js繼承方式

JS繼承方式

相關推薦