JavaScript 繼承

Guakin_Huang 發(fā)布于2019-08-22 10:37 / 806人閱讀

摘要：繼承一共有三種方式類式繼承原型式繼承摻元類類式繼承可以被裝扮成使用類式繼承的語言。在使用原型式繼承時，不需要用類來定義對象的結(jié)構(gòu)，只需直接創(chuàng)建一個對象即可。原型式繼承更能節(jié)約內(nèi)存。

今天整理面試題的時候看見一道題叫講一下繼承，雖然繼承以前也看過書，也在用，但是居然無法總結(jié)性、系統(tǒng)地回答這個問題，于是趕緊把《JavaScript設(shè)計模式》扒拉出來看看。

為什么需要繼承

在設(shè)計類的時候，能夠減少重復(fù)性代碼，并且能盡量弱化對象間的耦合。可以在現(xiàn)有類的基礎(chǔ)上進行設(shè)計并充分利用已經(jīng)具備的各種方法，而對設(shè)計的修改也更為輕松。
繼承一共有三種方式：類式繼承、原型式繼承、摻元類

類式繼承

JavaScript可以被裝扮成使用類式繼承的語言。通過用函數(shù)來聲明類、用關(guān)鍵字 new 來創(chuàng)建實例，JavaScript中的對象也能模仿Java或C++中的對象。
首先創(chuàng)造一個簡單的類聲明，及對該類的實例化：

// 創(chuàng)建 Person 類
function Person (name) {
    this.name = name;
}

Person.prototype.getName = function () {
    return this.name;
};

// 實例化 Person 類
var reader = new Person ("John Smith");
reader.getName();   // John Smith

創(chuàng)建繼承 Person 的類 Author ：

// 創(chuàng)建繼承 Person 的類 Author
function Author (name,books) {
    Person.call(this,name);
    this.book = books;
}

// 派生子類
Author.prototype = new Person();
Author.prototype.constructor = Author;
Author.prootype.getBooks = function () {
    return this.book;
};

在默認情況下，所有原型對象都會自動獲得一個 constructor （構(gòu)造函數(shù)）屬性，這個屬性是一個指向 prototype 屬性所在函數(shù)的指針。
為了簡化類的聲明。可以把派生子類的整個過程包裝在一個名為 extend 的函數(shù)中，作用是基于一個給定的類結(jié)構(gòu)創(chuàng)建一個新的類。

// extend 函數(shù)
function extend(subClass,superClass) {
    var F = function() {};
    F.prototype = superClass.prototype;
    subClass.prototype = new F();
    subClass.prototype.constructor = subClass;
    
    // 確保超類的 constructor 屬性被設(shè)置正確
    subClass.superclass = superClass.prototype;
    if(superClass.prototype.constructor == Object.prototype.constructor) {
        superClass.prototype.constructor = superClass;
    }
}

那么 Author 的繼承可以改寫為：

function Author (name,books) {
    Author.superClass.contructor.call(this,name);
    this.books = books;
}
extend(Author,Person);   // 調(diào)用 extend 函數(shù)

Author.prootype.getBooks = function () {
    return this.book;
};

原型式繼承

原型式繼承和類式繼承截然不同。在學(xué)習(xí)原型式繼承時，最好忘掉自己關(guān)于類和實例的一切知識，只從對象的角度來考慮。
在使用原型式繼承時，不需要用類來定義對象的結(jié)構(gòu)，只需直接創(chuàng)建一個對象即可。這個對象隨后可以被新的對象重用，這得益于原型鏈查找的工作機制，該對象被稱為原型對象。
下面使用原型式繼承來重新設(shè)計 Person 和 Author

// Person 原型對象
var Person = {
    name: "default name",
    getName: function() {
        return this.name;
    }
};

Person 現(xiàn)在是一個對象字面量，其中定義了所有類 Person 對象都要具備的屬性和方法，并為他們提供了默認值。clone 函數(shù)可以用來創(chuàng)建新的類 Person 對象，該函數(shù)會創(chuàng)建一個空對象，而該對象的原型對象被設(shè)置為 Person。

// Author 原型對象
var Author = clone(Person);
Author.books = [];   // Default value
Author.getBooks = function () {
    return this.books;
};

一個克隆并非原型對象的一份完全獨立的副本，它只是一個以那個對象為原型對象的空對象。對繼承而來的成員有讀和寫的不對等性：

var authorClone = clone(Author);
alert(authorClone.name);   // default name (連接到 Person.name)
authorClone.name = "new name";
alert(authorClone.name);   // new name (連接到 authorClone.name)

authorClone.books.push("new book");   // 在這里，想authorClone.books數(shù)組添加
                                      // 新元素實際上是把這個元素添加到
                                      // Author.books數(shù)組中。
authorClone.books = [];
authorClone.books.push("new book");

這也就說明了為什么必須為通過引用傳遞的數(shù)據(jù)類型的屬性創(chuàng)建新的副本。在以上例子中，向authorClone.books數(shù)組添加新元素實際上是把這個元素添加到Author.books數(shù)組中。這可不是什么好事，因為對那個值的修改不僅會影響到 Author，而且會影響到所有機場了Author但還未改寫那個屬性的默認值的對象。在改變所有那些數(shù)組和對象的成員之前，必須先為其創(chuàng)建新的副本。

類似繼承和原型式繼承的對比

包括JavaScript程序員在內(nèi)的整個程序員群體對類式繼承都比較熟悉。
原型式繼承更能節(jié)約內(nèi)存。在原型鏈中查找成員的方式使得所有克隆出來的對象都共享每個屬性和唯一一份實例，只有在直接設(shè)置了某個克隆出來的對象的屬性和方法時，情況才會有所變化。而類似繼承方式中創(chuàng)建的每一個對象在內(nèi)存中都有自己的一套屬性的副本。