JavaScript的9種繼承實作方式歸納_javascript技巧

不同於基於類別的程式語言，如 C 和 Java，JavaScript 中的繼承方式是基於原型的。同時由於 JavaScript 是一種非常靈活的語言，因此實現繼承的方式也非常多。

首要的基本概念是關於建構函式和原型鏈的，父物件的建構子稱為Parent，子物件的建構函式稱為Child，對應的父物件和子物件分別為parent和child。

物件中有一個隱藏屬性[[prototype]](注意不是prototype)，在 Chrome 中是__proto__，而在某些環境下則不可訪問，它指向的是這個物件的原型。在存取任何一個物件的屬性或方法時，首先會搜尋本物件的所有屬性，如果找不到的話則會根據[[prototype]]沿著原型鏈逐步搜尋其原型物件上的屬性，直到找到為止，否則返回undefined。

1.原型鏈繼承：

原型鍊是 JavaScript 中實作繼承的預設方式，如果要讓子物件繼承父物件的話，最簡單的方式是將子物件建構函式的prototype屬性指向父物件的一個實例：

複製程式碼 程式碼如下:

function Parent() {}
function Child() {}
Child.prototype = new Parent()

這時候，Child的prototype屬性被重寫了，指向了一個新對象，但是這個新對象的constructor屬性卻沒有正確指向Child，JS 引擎並不會自動為我們完成這件工作，這需要我們手動去將Child的原型物件的constructor屬性重新指向Child:

複製程式碼 程式碼如下:

Child.prototype.constructor = Child

以上就是JavaScript 中的預設繼承機制，將需要重用的屬性和方法遷移到原型對像中，而將不可重用的部分設定為對象的自身屬性，但這種繼承方式需要新建一個實例作為原型對象，效率上會低一些。

2.原型繼承（非原型鏈）：

為了避免上一個方法需要重複建立原型物件實例的問題，可以直接將子物件建構函式的prototype指向父物件建構函式的prototype，這樣，所有Parent.prototype中的屬性和方法也能被重複使用，同時不需要重複建立原型物件實例：

複製程式碼 程式碼如下:

Child.prototype = Parent.prototype
Child.prototype.constructor = Child

但是我們知道，在JavaScript 中，物件是作為引用類型存在的，這種方法實際上是將Child.prototype和Parent.prototype中保存的指針指向了同一個對象，因此，當我們想要在子對象原型中擴展一些屬性以便之後繼續繼承的話，父物件的原型也會被改寫，因為這裡的原型物件實例總是只有一個，這也是這種繼承方式的缺點。

3.臨時構造者繼承：

為了解決上面的問題，可以藉用一個臨時構造器起到一個中間層的作用，所有子對象原型的操作都是在臨時構造器的實例上完成，不會影響到父對象原型：

複製程式碼 程式碼如下:

var F = function() {}
F.prototype = Parent.prototype
Child.prototype = new F()
Child.prototype.constructor = Child

同時，為了可以在子物件中存取父類別原型中的屬性，可以在子物件建構器上加入一個指向父物件原型的屬性，如uber，這樣，可以在子物件上直接透過child.constructor.uber訪問到父級原型物件。

我們可以將上面的這些工作封裝成一個函數，以後呼叫這個函數就可以方便實現這種繼承方式了：

複製程式碼 程式碼如下:

function extend(Child, Parent) {
    var F = function() {}
    F.prototype = Parent.prototype
    Child.prototype = new F()
    Child.prototype.constructor = Child
    Child.uber = Parent.prototype
}

然後就可以這樣呼叫：

複製程式碼 程式碼如下:

extend(Dog, Animal)

4.屬性拷貝：

這種繼承方式基本上沒有改變原型鏈的關係，而是直接將父級原型物件中的屬性全部複製到子物件原型中，當然，這裡的複製僅適用於基本資料類型，物件類型只支持引用傳遞。

複製程式碼 程式碼如下:

function extend2(Child, Parent) {
    var p = Parent.prototype
    var c = Child.prototype
    for (var i in p) {
        c[i] = p[i]
    }
    c.uber = p
}

這種方式對部分原型屬性進行了重建，建構物件的時候效率會低一些，但是能夠減少原型鏈的查找。不過我個人覺得這種方式的優點並不明顯。

5.物件間繼承：

除了基於構造器間的繼承方法，還可以拋開構造器直接進行物件間的繼承。即直接進行物件屬性的拷貝，其中包括淺拷貝和深拷貝。

淺拷貝：
接受要繼承的對象，同時建立一個新的空對象，將要繼承對象的屬性拷貝至新對象並傳回這個新對象：

複製程式碼 程式碼如下:

function extendCopy(p) {
    var c = {}
    for (var i in p) {
        c[i] = p[i]
    }
    c.uber = p
    return c
}

拷貝完成之後對於新物件中需要改寫的屬性可以進行手動改寫。

深拷貝：
淺拷貝的問題也顯而易見，它不能拷貝物件類型的屬性而只能傳遞引用，要解決這個問題就要使用深拷貝。深拷貝的重點在於拷貝的遞歸調用，檢測到物件類型的屬性時就會建立對應的物件或數組，並逐一複製其中的基本類型值。

複製程式碼 程式碼如下:

function deepCopy(p, c) {
    c = c || {}
    for (var i in p) {
        if (p.hasOwnProperty(i)) {
            if (typeof p[i] === 'object') {
                c[i] = Array.isArray(p[i]) ? [] : {}
                deepCopy(p[i], c[i])
            } else {
                c[i] = p[i]
            }
        }
    }
    return c
}

其中用到了一個 ES5 的Array.isArray()方法用來判斷參數是否為數組，沒有實作此方法的環境需要自己手動封裝一個 shim。

複製程式碼 程式碼如下:

Array.isArray = function(p) {
    return p instanceof Array
}

但是使用instanceof運算子無法判斷來自不同框架的陣列變量，但這種情況比較少。

6.原型繼承：

借助父級對象，透過建構函式建立一個以父級物件為原型的新物件：

複製程式碼 程式碼如下:

function object(o) {
    var n
    function F() {}
    F.prototype = o
    n = new F()
    n.uber = o
    return n
}

這裡，直接將父物件設定為子物件的原型，ES5 中的 Object.create()方法就是這種實作方式。

7.原型繼承與屬性拷貝混合：

原型繼承方法中以傳入的父對象為原型建構子對象，同時還可以在父對象提供的屬性之外額外傳入需要拷貝屬性的對象：

複製程式碼 程式碼如下:

function ojbectPlus(o, stuff) {
    var n
    function F() {}
    F.prototype = o
    n = new F()
    n.uber = o

    for (var i in stuff) {
        n[i] = stuff[i]
    }
    return n
}

8.多重繼承：

這種方式不涉及原型鏈的操作，傳入多個需要拷貝屬性的對象，依序進行屬性的全拷貝：

複製程式碼 程式碼如下:

function multi() {
    var n = {}, stuff, i = 0,
        len = arguments.length
    for (i = 0; i         stuff = arguments[i]
        for (var key in stuff) {
            n[i] = stuff[i]
        }
    }
    return n
}

根據物件傳入的順序依序進行拷貝，也就是說，如果後傳入的物件包含和前面物件相同的屬性，後者將會覆寫前者。

9.構造器借用：

JavaScript中的call()和apply()方法非常好用，其改變方法執行上下文的功能在繼承的實作中也能發揮作用。所謂建構子借用是指在子物件建構器中藉用父物件的建構子對this進行操作：

複製程式碼 程式碼如下:

function Parent() {}
Parent.prototype.name = 'parent'

function Child() {
    Parent.apply(this, arguments)
}
var child = new Child()
console.log(child.name)

這種方式的最大優勢就是，在子物件的建構器中，是對子物件的自身屬性進行完全的重建，引用類型的變數也會產生一個新值而不是一個引用，所以對子物件的任何操作都不會影響父對象。

而這種方法的缺點在於，在子物件的建置過程中沒有使用過new操作符，因此子物件不會繼承父級原型物件上的任何屬性，在上面的程式碼中，child的name屬性將會是undefined。

要解決這個問題，可以再次手動將子物件建構器原型設為父物件的實例：

複製程式碼 程式碼如下:

Child.prototype = new Parent()

但這又會帶來另一個問題，即父物件的建構器會被呼叫兩次，一次是在父物件建構器借用過程中，另一次是在繼承原型過程中。

要解決這個問題，就要去掉一次父物件建構器的調用，建構器借用不能省略，那麼只能去掉後一次調用，實現繼承原型的另一方法就是迭代複製：

複製程式碼 程式碼如下:

extend2(Child, Parent)

使用之前實作的extend2()方法即可。