摘要：前言作為中最重要的內(nèi)容之一，繼承問題一直是我們關(guān)注的重點。如果一個類別繼承自另一個類別，就把這個稱為的子類，而把稱為的父類別也可以稱是的超類。

作為 JavaScript 中最重要的內(nèi)容之一，繼承問題一直是我們關(guān)注的重點。那么你是否清晰地知道它的原理以及各種實現(xiàn)方式呢

閱讀這篇文章，你將知道：

什么是繼承

實現(xiàn)繼承有哪幾種方式

它們各有什么特點

這里默認(rèn)你已經(jīng)清楚的知道構(gòu)造函數(shù)、實例和原型對象之間的關(guān)系，如果并不是那么清晰，那么推薦你先閱讀這篇文章 -- JavaScript 中的原型與原型鏈

如果文章中有出現(xiàn)紕漏、錯誤之處，還請看到的小伙伴多多指教，先行謝過

以下↓

繼承（inheritance）是面向?qū)ο筌浖夹g(shù)當(dāng)中的一個概念。如果一個類別 B 繼承自 另一個類別 A ，就把這個 B 稱為 A的子類 ，而把 A 稱為 B的父類別 也可以稱 A是B的超類 。繼承可以使得子類具有父類別的各種屬性和方法，而不需要再次編寫相同的代碼 ...更多)

通過這些概念和圖示我們不難知道繼承可以在我們的開發(fā)中帶來的便捷，那么在 JavaScript 中如何去實現(xiàn)繼承呢？

利用原型讓一個引用類型繼承另一個引用類型的屬性和方法

function SuperType() {
    this.name = "tt";
}
SuperType.prototype.sayName = function() {
    return this.name
}

function SubType() {
    this.name = "oo";
}
SubType.prototype = new SuperType()

var instance = new SubType()

instance.sayName() // oo
instance instanceof SubType // true
instance instanceof SuperType // ture

以上的試驗中，我們創(chuàng)建了兩個構(gòu)造函數(shù) SuperType 和 SubType ,并且讓 SubType 的原型指向 SuperType ，SubType 也就繼承了 SuperType 原型對象中的方法。所以在創(chuàng)建 instance 實例的時候，實例本身也就具有了 SuperType 中的方法，并且都處在它們的原型鏈中

SubType.prototype.constructor == SubType // false
SubType.prototype.constructor == SuperType // true

需要注意的是：這個時候 SubType.prototype.constructor 是指向 SuperType 的，相當(dāng)于重寫了 SubType 的原型對象。

用一張圖表示：

SubType.prototype 相當(dāng)于 SuperType 的實例存在的，所以 SubType.prototype.constructor 就指向 SuperType

優(yōu)點：

簡單、易于實現(xiàn)

父類新增原型方法/原型屬性，子類都能訪問到

非常純粹的繼承關(guān)系，實例是子類的實例，也是父類的實例

缺點：

無法實現(xiàn)多繼承

想要為子類 SubType 添加原型方法，就必須在 new SuperType 之后添加（會覆蓋）

來自原型對象的所有屬性被所有實例共享(引用類型的值修改會反映在所有實例上面)

創(chuàng)建子類實例時，無法向父類構(gòu)造函數(shù)傳參

在子類構(gòu)造函數(shù)的內(nèi)部調(diào)用超類型構(gòu)造函數(shù)，通過 apply 和 call 實現(xiàn)

function SuperType(name) {
    this.name = name;
    this.colors = ["red", "orange", "black"];
}

function SubType() {
    SuperType.call(this, "tt");
}

var instance = new SubType()
var instance1 = new SubType()

instance.colors // ["red", "orange", "black"]
instance.name // tt

instance.colors.push("green");
instance.colors // ["red", "orange", "black", "green"]
instance1.colors // ["red", "orange", "black"]

優(yōu)點：

解決了原型鏈繼承不能傳參的問題

子類實例共享父類引用屬性的問題

可以實現(xiàn)多繼承(call可以指定不同的超類)

缺點：

實例并不是父類的實例，只是子類的實例

只能繼承父類的實例屬性和方法，不能繼承原型屬性/方法

無法實現(xiàn)函數(shù)復(fù)用

偽經(jīng)典繼承（最常用的繼承模式）：將原型鏈和借用構(gòu)造函數(shù)的技術(shù)組合到一起。使用原型鏈實現(xiàn)對原型屬性和方法的繼承，通過構(gòu)造函數(shù)來實現(xiàn)對實例屬性的繼承

function SuperType(name) {
    this.name = name;
    this.colors = ["red", "orange", "black"];
}
SuperType.prototype.sayName = function() {
    return this.name
}

function SubType() {
    SuperType.call(this, "tt");
    this.name = "oo";
}
// 這里的 SubType.prototype.constructor 還是指向 SuperType
SubType.prototype = new SuperType();

var instance = new SubType();
var instance1 = new SubType();

instance.name // oo
instance.sayName() // oo

instance.colors.push("green");
instance.colors // ["red", "orange", "black", "green"]
instance1.colors // ["red", "orange", "black"]

優(yōu)點：

可以繼承實例屬性/方法，也可以繼承原型屬性/方法

不存在引用屬性共享問題

可傳參

函數(shù)可復(fù)用

缺點：

調(diào)用了兩次父類構(gòu)造函數(shù)，生成了兩份實例（子類實例將子類原型上的那份屏蔽了）

借助原型鏈可以基于已有的對象創(chuàng)建新對象，同時還不必因此創(chuàng)建自定義類型

function obj(o) {
    function F(){}
    F.prototype = o;
    return new F();
}

var person = {
    name: "tt",
    age: 18,
    colors: ["red", "green"]
}

var instance = obj(person);
var instance1 = obj(person);
instance.colors.push("black");
instance.name // tt
instance.colors // ["red", "green", "black"]
instance1.colors // ["red", "green", "black"]

創(chuàng)建一個臨時的構(gòu)造函數(shù)，然后將傳入的對象當(dāng)做這個構(gòu)造函數(shù)的原型對象，最后返回這個臨時構(gòu)造函數(shù)的新實例。實際上，就是對傳入的對象進(jìn)行了一次淺復(fù)制

ES5 通過新增 Object.create() 規(guī)范化了原型式繼承

更多 Object.create()語法請點擊 這里

優(yōu)點：

支持多繼承（傳入的對象不同）

不需要興師動眾的創(chuàng)建很多構(gòu)造函數(shù)

缺點： 和原型鏈繼承基本一致，效率較低，內(nèi)存占用高（因為要拷貝父類的屬性）

創(chuàng)建一個僅用于封裝繼承過程的函數(shù)，在函數(shù)內(nèi)部對這個對象進(jìn)行改變，最后返回這個對象

function createAnother(obj) {
    var clone = Object(obj);
    clone.sayHi = function() {
        alert("Hi");
    }
    return clone
}

var person = {
    name: "tt",
    age: 18,
    friends: ["oo", "aa", "cc"],
    sayName() {
        return this.name
    }
}

var instance = createAnother(person)
var instance1 = createAnother(person)

instance.friends.push("yy")

instance.name // "tt"
instance.sayHi() // Hi
instance.friends // ["oo", "aa", "cc", "yy"]
instance1.friends // ["oo", "aa", "cc", "yy"]

優(yōu)點：

支持多繼承

缺點：

實例并不是父類的實例，只是子類的實例

不能實現(xiàn)復(fù)用（與構(gòu)造函數(shù)相似）

實例之間會互相影響

借用構(gòu)造函數(shù)來繼承屬性，通過原型鏈的混成形式來繼承方法。通過寄生方式，砍掉父類的實例屬性，這樣，在調(diào)用兩次父類的構(gòu)造的時候，就不會初始化兩次實例方法/屬性，避免的組合繼承的缺點

function inherit(subType, superType) {
    var obj = Object(superType.prototype); // 創(chuàng)建對象
    obj.constructor = subType;  // 指定constructor
    subType.prototype = obj;    // 指定對象
}

function SuperType(name) {
    this.name = name;
    this.colors = ["red", "orange", "black"];
}
SuperType.prototype.sayName = function() {
    return this.name
}

function SubType() {
    SuperType.call(this, "tt");
    this.name = "oo";
}

inherit(SubType, SuperType)

var instance = new SubType()

instance.name // oo
instance.sayName // oo
instance instanceof SubType // true
instance instanceof SuperType // true
SubType.prototype.constructor == SubType // true

堪稱完美，只是實現(xiàn)稍微復(fù)雜一點

作為 JavaScript 最重要的概念之一，對于繼承實現(xiàn)的方式方法以及它們之間的差異我們還是很有必要了解的。

在實現(xiàn)繼承的時候，拷貝 也是一種很有效的方式，由于 JavaScript 簡單數(shù)據(jù)類型與引用類型的存在，衍生出了 淺拷貝 與 深拷貝 的概念，那么它們又是什么，怎么去實現(xiàn)呢

且聽下回分解，哈哈

周末愉快

最后，推薦一波前端學(xué)習(xí)歷程，不定期分享一些前端問題和有意思的東西歡迎 star 關(guān)注 傳送門

JavaScript 高級程序設(shè)計

JavaScript實現(xiàn)繼承的幾種方式