為什麼需要利用javascript實作繼承？幾種繼承方式實例詳解

為何需要利用javascript實作繼承

早期pc機器的效能確實不敢恭維，所有的壓力全在伺服器端，客戶端瀏覽器純屬擺設。再加上那時流行的table佈局以及電話線的上網方式導致瀏覽一個網頁十分的卡；而今互聯網時代飛速發展，個人電腦硬體得到了極大提升，客戶端瀏覽器的性能也十分的酸爽， web開發的模式也在悄悄改變：服務端不再像以前那樣“辛苦”，取而代之的是盡可能的讓瀏覽器承擔更多的任務，如此一來，壓力分攤到每個客戶端上，企業不但節省成本，隨之也讓web前端開發變的更加有趣──越來越多的前端框架層出不窮，甚至出現了許多前端的MVC框架。在這種背景下，javascript的角色已經絕對不是只做一些簡單的驗證，發送一些請求或操作一些DOM，更多的需要擔任類似前端路由和業務層的角色，並且javascript需要做大量的邏輯性任務，這裡面就包括前台資料的抽離（即model），而只有運用物件導向的思維才能很好的對抽離資料進行處理，因此繼承就在這裡顯得舉足輕重。

現在從前台抽離一個model名為Person，其有基本屬性name和age，默認每個人都會說話，因此將說話的功能say放在了原型對像上，以供每個實例享用。現在對Man來說，它需要繼承Person的基本屬性，並且在此基礎上加入自己特有的屬性。

function Person (name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.say = function(){
  console.log('hello, my name is ' + this.name);
};
function Man() {
  //my own properties
}

幾個主流的繼承方式：

1.原型鏈繼承

function Person (name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.say = function(){
  console.log('hello, my name is ' + this.name);
};
function Man() {
}
Man.prototype = new Person('pursue');
var man1 = new Man();
man1.say(); //hello, my name is pursue
var man2 = new Man();
console.log(man1.say === man2.say);//true
console.log(man1.name === man2.name);//true

這種繼承方式很直接，為了取得Person的所有屬性方法(實例上的和原型上的)，直接將父類別的實例new Person('pursue')賦給了子類別的原型，其實子類別的實例man1,man2本身就是一個完全空的對象，所有的屬性和方法都得去原型鏈上去找，因而找到的屬性方法都是同一個。
所以直接利用原型鏈繼承是不切實際的。

2.利用建構子繼承

function Person (name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.say = function(){
  console.log('hello, my name is ' + this.name);
};
function Man(name, age) {
  Person.apply(this, arguments);
}
//Man.prototype = new Person('pursue');
var man1 = new Man('joe');
var man2 = new Man('david');
console.log(man1.name === man2.name);//false
man1.say(); //say is not a function

這裡子類別的在建構子裡利用了apply去呼叫父類別的建構函數，從而達到繼承父類別屬性的效果，比直接利用原型鏈要好的多，至少每個實例都有自己那一份資源，但是這種辦法只能繼承父類別的實例屬性，因而找不到say方法，為了繼承父類別所有的屬性和方法，則就要修改原型鏈，從而引入了組合繼承方式。

3.組合繼承

function Person (name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.say = function(){
  console.log('hello, my name is ' + this.name);
};
function Man(name, age) {
  Person.apply(this, arguments);
}
Man.prototype = new Person();
var man1 = new Man('joe');
var man2 = new Man('david');
console.log(man1.name === man2.name);//false
console.log(man1.say === man2.say);//true
man1.say(); //hello, my name is joe

要注意的是man1和man2的實例屬性其實是覆寫了原型屬性，但是並沒有要覆寫原型上的say方法（因為它們沒有），所以這裡man1.say === man2.say依然回傳true，因而需要十分小心沒有覆寫掉的原型屬性，因為它是所有實例共有的。

4.寄生組合繼承

說實話真不知道下面的這種形式叫這名字，但是它確實是最流行，最經典的javascript的繼承方式。其實，只需要明白原型物件的結構即可：

function Person (name, age) {
      this.name = name;
      this.age = age;
    }
Person.prototype.say = function(){
  console.log('hello, my name is ' + this.name);
};
function Man(name, age) {
  Person.apply(this, arguments);
}
Man.prototype = Object.create(Person.prototype);//a.
Man.prototype.constructor = Man;//b.
var man1 = new Man('pursue');
var man2 = new Man('joe');
console.log(man1.say == man2.say);
console.log(man1.name == man2.name);

其實寄生組合繼承和上面的組合繼承差異僅在於建構子類別原型物件的方式上（a.和b.），這裡用到了Object.creat(obj)方法，該方法會對傳入的obj物件進行淺拷貝，類似於：

function create(obj){
  function T(){};
  T.prototype = obj;
  return new T();
}

因此，a.會將子類別的原型物件與父類別的原型物件進行很好的連接，而並不像一般的組合繼承那樣直接對子類別的原型進行複製（如Man.prototype = new Person();）,這樣只是很暴力的在對屬性進行覆寫。而寄生組合繼承方式則對實例屬性和原型屬性分別進行了繼承，在實作上更合理。

注意:程式碼b.並不會改變instanceof的結果，但是對於需要用到construcor的場景，這麼做更加嚴謹。

以上是為什麼需要利用javascript實作繼承？幾種繼承方式實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！