都0202年了，你還不知道javascript有幾種繼承方式？

前言
    當面試官問你：你了解js哪些繼承方式？es6的class繼承是如何實現的？你心中有很清晰的答案嗎？如果沒有的話，可以通過閱讀本文，幫助你更深刻地理解js的所有繼承方式。
 
    js繼承總共分成5種，包括構造函數式繼承、原型鏈式繼承、組合式繼承、寄生式繼承和寄生組合式繼承。
 
構造函數式繼承
 
    首先來看第一種，構造函數式繼承，顧名思義，也就是利用函數去實現繼承；
 
    假設我們現在有一個父類函數：
// 父類構造函數
function Parent(color) {
    this.color = color;
    this.print = function() {
        console.log(this.color);
    }
}

    現在要編寫一個子類函數來繼承這個父類，如下:

// 子類構造函數
function Son(color) {
    Parent.call(this, color);
}

    上面程式碼可以看到，子類Son是通過Parent.call的方式去調用父類構造函數，然後把this對象傳進去，執行父類構造函數之後，子類Son就擁有了父類定義的color和print方法。

    調用一下該方法，輸出如下：

// 測試
var son1 = new Son('red');
son1.print(); // red
​
var son2 = new Son('blue');
son2.print(); // blue
    可以看到son1和son2都正常繼承了父類的print方法和各自傳進去的color屬性；
 
    以上就是構造函數式繼承的實現了，這是最原始的js實現繼承的方式；
 
    但是當我們深入想一下會發現，這種根本就不是傳統意義上的繼承！
 
 
    因為每一個Son子類調用父類生成的對象，都是各自獨立的，也就是說，如果父類希望有一個公共的屬性是所有子類實例共享的話，是沒辦法實現的。什麼意思呢，來看下面的程式碼：
function Flower() {
    this.colors = ['黃色', '紅色'];
    this.print = function () {
        console.log(this.colors)
    }
}
​
function Rose() {
    Flower.call(this);
}
​
var r1 = new Rose();
var r2 = new Rose();
​
console.log(r1.print()); // [ '黃色', '紅色' ]
console.log(r2.print()); // [ '黃色', '紅色' ]

    我們現在有一個基類Flower，它有一個屬性colors，現在我們把某一個實例的colors值改一下：

r1.colors.push('紫色');
​
console.log(r1.print()); // [ '黃色', '紅色', '紫色' ]
console.log(r2.print()); // [ '黃色', '紅色' ]
    結果如上，顯然，改變的只有r1的值，因為通過構造函數創造出來的實例對象中，所有的屬性和方法都是實例內部獨立的，並不會跟其他實例共享。
 
    總結一下構造函數的優缺點：
  • 優點：所有的基本屬性獨立，不會被其他實例所影響；
  • 缺點：所有希望共享的方法和屬性也獨立了，沒有辦法通過修改父類某一處來達到所有子實例同時更新的效果；同時，每次創建子類都會調用父類構造函數一次，所以每個子實例都拷貝了一份父類函數的內容，如果父類很大的話會影響性能；
原型鏈繼承
 
    下面我們來看第二種繼承方式，原型鏈式繼承；
 
    同樣先來看下例子：
function Parent() {
    this.color = 'red';
    this.print = function() {
        console.log(this.color);
    }
}
function Son() {
}

    我們有一個父類和一個空的子類；

Son.prototype = new Parent();
Son.prototype.constructor = Son;

    接著我們把子函數的原型屬性賦值給了父函數的實例；

var son1 = new Son();
son1.print(); // red
    最後新建子類實例，調用父類的方法，成功拿到父類的color和print屬性方法；
 
    我們重點來分析一下下面兩行程式碼：
Son.prototype = new Parent();
Son.prototype.constructor = Son;
    這段程式碼中，子函數的原型賦給了父函數的實例，我們知道prototype是函數中的一個屬性，js的一個特性就是：如果一個對象某個屬性找不到，會沿著它的原型往上去尋找，直到原型鏈的最後才會停止尋找。
 
    關於原型更多基礎的知識，可以參考一下其他文章，或許以後我也會出一期專門講解原型和原型鏈的文章。
 
    回到程式碼，我們看到最後實例son成功調用了Print方法，輸出了color屬性，這是因為son從函數Son的prototype屬性上面去找到的，也就是從new Parent這個對象裡面找到的；
 
   
    這種方式也不是真正的繼承，因為所有的子實例的屬性和方法，都在父類同一個實例上了，所以一旦某一個子實例修改了其中的方法，其他所有的子實例都會被影響，來看下程式碼： 
function Flower() {
    this.colors = ['黃色', '紅色'];
    this.print = function () {
        console.log(this.colors)
    }
}
​
function Rose() {}
Rose.prototype = new Flower();
Rose.prototype.constructor = Rose;
​
var r1 = new Rose();
var r2 = new Rose();
​
console.log(r1.print()); // [ '黃色', '紅色' ]
console.log(r1.print()); // [ '黃色', '紅色' ]
​
r1.colors.push('紫色');
​
console.log(r1.print()); // [ '黃色', '紅色', '紫色' ]
console.log(r2.print()); // [ '黃色', '紅色', '紫色' ]
    還是剛才的例子，這次Rose子類選擇了原型鏈繼承，所以，子實例r1修改了colors之後，r2實例的colors也被改動了，這就是原型鏈繼承不好的地方。
 
    來總結下原型鏈繼承的優缺點：
  • 優點：很好的實現了方法的共享；
  • 缺點：正是因為什麼都共享了，所以導致一切的屬性都是共享的，只要某一個實例進行修改，那麼所有的屬性都會變化 
組合式繼承
 
    這裡來介紹第三種繼承方式，組合式繼承；
 
    這種繼承方式很好理解，既然構造函數式繼承和原型鏈繼承都有各自的優缺點，那麼我們把它們各自的優點整合起來，不就完美了嗎？
 

 

 

   
 
 
 
 
 
 
 
組合式繼承做的就是這個事情~來看一段程式碼例子：
​function Parent(color) {
    this.color = color;
}
Parent.prototype.print = function() {
    console.log(this.color);
}
function Son(color) {
    Parent.call(this, color);
}
Son.prototype = new Parent();
Son.prototype.constructor = Son;
​
var son1 = new Son('red');
son1.print(); // red
​
var son2 = new Son('blue');
son2.print(); // blue
    上面程式碼中，在Son子類中，使用了Parent.call來調用父類構造函數，同時又將Son.prototype賦給了父類實例；為什麼要這樣做呢？為什麼這樣就能解決上面兩種繼承的問題呢？
 
 
    我們接著分析一下，使用Parent.call調用了父類構造函數之後，那麼，以後所有通過new Son創建出來的實例，就單獨拷貝了一份父類構造函數裡面定義的屬性和方法，這是前面構造函數繼承所提到的一樣的原理；
 
    然後，再把子類原型prototype賦值給父類的實例，這樣，所有子類的實例對象就可以共享父類原型上定義的所有屬性和方法。這也不難理解，因為子實例會沿著原型鏈去找到父類函數的原型。
 
    因此，只要我們定義父類函數的時候，將私有屬性和方法放在構造函數裡面，將共享屬性和方法放在原型上，就能讓子類使用了。
 
    以上就是組合式繼承，它很好的融合了構造函數繼承和原型鏈繼承，發揮兩者的優勢之處，因此，它算是真正意義上的繼承方式。
 
寄生式繼承
 
    既然上面的組合式繼承都已經這麼完美了，為什麼還需要其他的繼承方式呢？
 
 
    我們細想一下，Son.prototype = new Parent();這行程式碼，它有什麼問題沒有？
 
    顯然，每次我們實例化子類的時候，都需要調用一次父類構造函數，那麼，如果父類構造函數是一個很大很長的函數，那麼每次實例化子類就會執行很長時間。
 
    實際上我們並不需要重新執行父類函數，我們只是想要繼承父類的原型。
 
    寄生式繼承就是在做這個事情，它是基於原型鏈式繼承的改良版：
 
var obj = {
    color: 'red',
    print: function() {
        console.log(this.color);
    }
};
​
var son1 = Object.create(obj);
son1.print(); // red
​
var son2 = Object.create(obj);
son2.print(); // red

    寄生式繼承本質上還是原型鏈繼承，Object.create(obj);方法意思是以obj為原型構造對象，所以寄生式繼承不需要構造函數，但是同樣有著原型鏈繼承的優缺點，也就是它把所有的屬性和方法都共享了。

寄生組合式繼承
 
    接下來到我們最後一個繼承方式，也就是目前業界最為完美的繼承解決方案：寄生組合式繼承。
 
    沒錯，它就是es6的class語法實現原理。
 
    但是如果你理解了組合式繼承，那麼理解這個方式也很簡單，只要記住，它出現的主要目的，是為了解決組合式繼承中每次都需要new Parent導致的執行多一次父類構造函數的缺點。
 
    下面來看程式碼：
function Parent(color) {
    this.color = color;
}
Parent.prototype.print = function() {
    console.log(this.color);
}
function Son(color) {
    Parent.call(this, color);
}
Son.prototype = Object.create(Parent.prototype);
Son.prototype.constructor = Son;
​
var son1 = new Son('red');
son1.print(); // red
​
var son2 = new Son('blue');
son2.print(); // blue
    這段程式碼不同之處只有一個，就是把原來的Son.prototype = new Parent();修改為了Son.prototype = Object.create(Parent.prototype);
 
    我們前面講過，Object.create方法是以傳入的對象為原型，創建一個新對象；創建了這個新對象之後，又賦值給了Son.prototype，因此Son的原型最終指向的其實就是父類的原型對象，和new Parent是一樣的效果；
 
 
    到這裡，我們5中js的繼承方式也就講完了；

 

 

 

 
 
 
 
 
 
 
 
 
    如果你對上面的內容感到疑問或者不理解的，可以留言和我交流，或者關注公眾號直接聯繫我~
 
    最後感謝小夥伴的閱讀，如果覺得文章寫的還可以的話，歡迎點個贊、點個關注，我會持續輸出優質的技術分享文章。​
 

 

 

Tags:

VirMach 便宜 VPS

QNews

QNews