JavaScript如何實作繼承的

JavaScript是一種物件導向的語言，而繼承是物件導向程式設計的重要特性。在JavaScript中，繼承的實作方式有多種，本文將介紹其中較常見的幾種方法。

一、原型鏈繼承

原型鏈繼承是JavaScript中最基本的一種繼承方式，也是最常用的一種。透過原型鏈繼承，可以實作子類別繼承父類別的屬性和方法。

原型鏈繼承的實作方法如下：

function Parent(name) {
    this.name = name;
    this.colors = ['red', 'green', 'blue'];
}

Parent.prototype.sayName = function() {
    console.log(this.name);
};

function Child(name, age) {
    this.age = age;
    Parent.call(this, name);
}

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

var child1 = new Child('Tom', 18);
child1.colors.push('black');
console.log(child1.colors);  // ['red', 'green', 'blue', 'black']
child1.sayName();  // Tom

var child2 = new Child('Jerry', 20);    
console.log(child2.colors);  // ['red', 'green', 'blue']
child2.sayName();  // Jerry

在上述程式碼中，我們首先定義了一個父類別Parent和一個子類別Child。在Child中，我們使用Parent.call(this, name)呼叫了父類別建構函數，並透過Child.prototype = new Parent()將Child的原型指向了Parent，從而實現了繼承。在最後，我們建立了兩個子類別實例child1和child2，並驗證了繼承的效果。

原型鏈繼承的優點是實作簡單，容易理解。但它的缺點也很明顯，即會造成原型物件中的引用類型屬性被所有實例共享。

二、建構子繼承

建構子繼承是一種比較容易理解的繼承方式，它透過在子類別建構子中呼叫父類別建構子來實現繼承。

建構子繼承的實作方法如下：

function Parent(name) {
    this.name = name;
    this.colors = ['red', 'green', 'blue'];
}

Parent.prototype.sayName = function() {
    console.log(this.name);
};

function Child(name, age) {
    Parent.call(this, name);
    this.age = age;
}

var child1 = new Child('Tom', 18);
child1.colors.push('black');
console.log(child1.colors);  // ['red', 'green', 'blue', 'black']
child1.sayName();  // TypeError: child1.sayName is not a function 

var child2 = new Child('Jerry', 20);    
console.log(child2.colors);  // ['red', 'green', 'blue']
child2.sayName();  // TypeError: child2.sayName is not a function

上述程式碼中，我們在子類別建構子Child中使用Parent.call(this, name)呼叫了父類別建構函數，並將this指向子類別實例，從而實現了繼承。但由於建構函式繼承並不會將父類別原型中的方法繼承下來，因此我們在子類別中無法直接呼叫父類別原型中的方法。

建構函式繼承的優點是避免了原型鏈繼承中引用型別屬性被所有實例共享的問題，但它的缺點也很明顯，即無法繼承父類原型中的方法。

三、組合繼承

組合繼承是JavaScript中最常用的一種繼承方式，它是將原型鏈繼承和建構函式繼承結合起來的一種方式，解決了兩者各自的缺點。

組合繼承的實作方法如下：

function Parent(name) {
    this.name = name;
    this.colors = ['red', 'green', 'blue'];
}

Parent.prototype.sayName = function() {
    console.log(this.name);
};

function Child(name, age) {
    Parent.call(this, name);
    this.age = age;
}

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

var child1 = new Child('Tom', 18);
child1.colors.push('black');
console.log(child1.colors);  // ['red', 'green', 'blue', 'black']
child1.sayName();  // Tom

var child2 = new Child('Jerry', 20);    
console.log(child2.colors);  // ['red', 'green', 'blue']
child2.sayName();  // Jerry

上述程式碼中，我們在子類別建構子Child中使用Parent.call(this, name)呼叫了父類別建構函數，並將this指向子類別實例，從而實現了繼承。同時，我們在子類別原型中透過Child.prototype = new Parent()使子類別繼承了父類別的原型，從而繼承了父類別原型中的方法。

組合繼承的優點是繼承方式完整，既可以繼承父類別原型中的方法，又可以避免在原型鏈繼承中引用類型屬性被所有實例共享的問題。但它的缺點是會呼叫兩次父類別建構函數，浪費了一定的記憶體空間。

四、寄生組合繼承

寄生組合繼承是組合繼承的一種最佳化方式，它避免了在子類別原型中多次呼叫父類別建構子的問題，從而減少了記憶體開銷。

寄生組合繼承的實作方法如下：

function Parent(name) {
    this.name = name;
    this.colors = ['red', 'green', 'blue'];
}

Parent.prototype.sayName = function() {
    console.log(this.name);
};

function Child(name, age) {
    Parent.call(this, name);
    this.age = age;
}

Child.prototype = Object.create(Parent.prototype, {
    constructor: {
        value: Child,
        enumerable: false,
        writable: true,
        configurable: true
    }
});

var child1 = new Child('Tom', 18);
child1.colors.push('black');
console.log(child1.colors);  // ['red', 'green', 'blue', 'black']
child1.sayName();  // Tom

var child2 = new Child('Jerry', 20);    
console.log(child2.colors);  // ['red', 'green', 'blue']
child2.sayName();  // Jerry

上述程式碼中，我們在子類別原型中使用Object.create()方法建立了一個父類別原型的副本，並且透過Object .create()的第二個參數重寫了子類別原型的constructor屬性，從而使其指向了子類別本身。由於Object.create()方法並不會呼叫父類別建構函數，因此就避免了在子類別原型中多次呼叫父類別建構子的問題。

寄生組合繼承的優點是既繼承了父類別原型中的方法，又避免了在子類別原型中多次呼叫父類別建構子的問題。缺點是實現較為複雜。

總之，JavaScript中實作繼承的方法有很多種，每種方法都有各自的優缺點。在實際開發中，我們應該根據具體情況選擇合適的繼承方式。

以上是JavaScript如何實作繼承的的詳細內容。更多資訊請關注PHP中文網其他相關文章！