JavaScript中的類繼承

Douglas Crockford
www.

翻譯 ShiningRay

www.

And you think you‘re so clever and classless and free

• John Lennon

JavaScript 一種沒有類的，面向對象的語言，它使用原型繼承來代替類繼承。這個可能對受過傳統(tǒng)的面向對象語言（如C++和Java）訓練的程序員來說有點迷惑。JavaScript的原型繼承比類繼承有更強大的表現(xiàn)力，現(xiàn)在就讓我們來看看。i

但首先，為什么我們如此關心繼承呢？主要有兩個原因。第一個是類型有利。我們希望語言系統(tǒng)可以自動進行類似類型引用的轉換cast。小類型安全可以從一個要求程序顯示地轉換對象引用的類型系統(tǒng)中獲得。這是強類型語言最關鍵的要點，但是這對像JavaScript這樣的弱類型語言是無關的，JavaScript中的類引用無須強制轉換。

第二個原因是為了代碼的服用。在程序中常常會發(fā)現(xiàn)很多對象都會實現(xiàn)同一些方法。類讓建立單一的一個定義集中建立對象成為可能。在對象中包含其他對象也包含的對象也是很常見的，但是區(qū)別僅僅是一小部分方法的添加或者修改。類繼承對這個十分有用，但原型繼承甚至更有用。

要展示這一點，我們要介紹一個小小的“甜點”可以主我們像一個常規(guī)的類語言一樣寫代碼。我們然后會展示一些在類語言中沒有的有用的模式。最后，我們會就會解釋這些“甜點”。

類繼承

首先，我們建立一個Parenizor 類，它有成員 value 的get和set方法，還有一個會將value包裝在括號內的toString方法。

function Parenizor(value) {
    this.setValue(value);
}

Parenizor.method(‘setValue‘, function (value) {
    this.value = value;
    return this;
});

Parenizor.method(‘getValue‘, function () {
    return this.value;
});

Parenizor.method(‘toString‘, function () {
    return ‘(‘ + this.getValue() + ‘)‘;
});

這個語法可能沒什么用，但它很容易看出其中類的形式。method 方法接受一個方法名和一個函數(shù)，并把它們放入類中作為公共方法。T

現(xiàn)在我們可以寫成

myParenizor = new Parenizor(0);
myString = myParenizor.toString();

正如期望的那樣，myString 是 "(0)"。

現(xiàn)在我們要建立另一個繼承自Parenizor 的類，它基本上是一樣的除了 toString 方法將會產(chǎn)生"-0-" 如果 value 是零或者空。

function ZParenizor(value) {
    this.setValue(value);
}

ZParenizor.inherits(Parenizor);

ZParenizor.method(‘toString‘, function () {
    if (this.getValue()) {
        return this.uber(‘toString‘);
    }
    return "-0-";
});

The inherits 方法類似于Java的 extends 。uber 方法類似于Java的 super 。它令一個方法調用父類的方法（更改了名稱是為了避免和保留字沖突）.

我們可以寫成這樣

myZParenizor = new ZParenizor(0);
myString = myZParenizor.toString();

這次, myString 是 "-0-".

JavaScript 并沒有類，但我們可以編程達到這個目的。

多繼承

通過操作一個函數(shù)的prototype 對象，我們可以實現(xiàn)多繼承?；旌隙嗬^承難以實現(xiàn)而且可能會遭到名稱沖突的危險。我們可以在JavaScript中實現(xiàn)混合多繼承，但這個例子我們將使用一個較規(guī)范的形式稱為瑞士繼承 Swiss Inheritance.

假設有一個NumberValue 類有一個setValue 方法用來檢查 value 是不是在一個指定范圍內的一個數(shù)，并在適當?shù)臅r候拋出異常。我們只要它的 setValue 和 setRange 方法給我們的 ZParenizor 。我們當然不想要它的 toString 方法。這樣，我們寫到：

ZParenizor.swiss(NumberValue, ‘setValue‘, ‘setRange‘);

這個將僅僅添加需要的方法。

寄生繼承

這是另一個書寫 ZParenizor 類的方法。并不從 Parenizor 繼承，而是寫了一個調用了Parenizor 構造器的構造器，并對結果修改最后返回這個結果。這個構造器添加的是特權方法而非公共方法。

function ZParenizor2(value) {
    var self = new Parenizor(value);
    self.toString = function () {
        if (this.getValue()) {
            return this.uber(‘toString‘);
        }
        return "-0-"
    };
    return self;
}

類繼承是一種“是……”的關系，而寄生繼承是一個關于“原是……而現(xiàn)在是……”的關系。構造器在對象的構造中扮演了大量的角色。注意 uber （代替 super 關鍵字）對特權方法仍有效。

類擴展

JavaScript的動態(tài)性讓我們可以對一個已有的類添加或替換方法。我們可以在任何時候調用方法。我們可以隨時地擴展一個類。繼承不是這個方式。所以我們把這種情況稱為“類擴展”來避免和Java的 extends ──也叫擴展，但不是一回事──相混淆。

對象擴展

在靜態(tài)面向對象語言中，如果你想要一個對象和另一個對象有所區(qū)別，你必須新建立一個類。但在JavaScript中，你可以向單獨的對象添加方法而不用新建類。這會有巨大的能量因為你就可以書寫盡量少的類，類也可以寫得更簡單。想想JavaScript的對象就像哈希表一樣。你可以在任何時候添加新的值。如果這個值是一個函數(shù)，那他就會成為一個方法。

這樣在上面的例子中，我完全不需要 ZParenizor 類。我只要簡單修改一下我的實例就行了。

myParenizor = new Parenizor(0);
myParenizor.toString = function () {
    if (this.getValue()) {
        return this.uber(‘toString‘);
    }
    return "-0-";
};
myString = myParenizor.toString();

我們給 myParenizor 實例添加了一個 toString 方法而沒有使用任何繼承。我們可以演化單獨的實例因為這個語言是無類型的。

小甜點

要讓上面的例子運行起來，我寫了四個“甜點”方法。首先，method 方法，可以把一個實例方法添加到一個類中。

Function.prototype.method = function (name, func) {
    this.prototype[name] = func;
    return this;
};

這個將會添加一個公共方法到 Function.prototype 中，這樣通過類擴展所有的函數(shù)都可以用它了。它要一個名稱和一個函數(shù)作為參數(shù)。

它返回 this 。當我寫一個沒有返回值的方法時，我通常都會讓它返回 this 。這樣可以形成鏈式語句。

下面是 inherits 方法，它會指出一個類是繼承自另一個類的。它必須在兩個類都定義完了之后才能定義，但要在方法繼承之前調用。

Function.method(‘inherits‘, function (parent) {
    var d = 0, p = (this.prototype = new parent());

    this.method(‘uber‘, function uber(name) {
        var f, r, t = d, v = parent.prototype;
        if (t) {
            while (t) {
                v = v.constructor.prototype;
                t -= 1;
            }
            f = v[name];
        } else {
            f = p[name];
            if (f == this[name]) {
                f = v[name];
            }
        }
        d += 1;
        r = f.apply(this, Array.prototype.slice.apply(arguments, [1]));
        d -= 1;
        return r;
    });
    return this;
});

再來，我們擴展 Function 類。我們加入一個 parent 類的實例并將它做為新的 prototype 。我們也必須修正 constructor 字段，同時我們加入 uber 方法。

uber 方法將會在自己的prototype 中查找某個方法。這個是寄生繼承或類擴展的一種情況。如果我們是類繼承，那么我們要找到 parent的 prototype 中的函數(shù)。return 語句調用了函數(shù)的apply方法來調用該函數(shù)，同時顯示地設置 this并傳遞參數(shù)。參數(shù)（如果有的話）可以從arguments 數(shù)組中獲得。不幸的是， arguments 數(shù)組并不是一個真正的數(shù)組，所以我們又要用到 apply 來調用數(shù)組中的 slice 方法。

最后，swiss 方法

Function.method(‘swiss‘, function (parent) {
    for (var i = 1; i < arguments.length; i += 1) {
        var name = arguments[i];
        this.prototype[name] = parent.prototype[name];
    }
    return this;
});

The swiss 方法對每個參數(shù)進行循環(huán)。每個名稱，它都將 parent的原型中的成員復制下來到新的類的 prototype 中。

總結

JavaScript可以像類語言那樣使用，但它也有一種十分獨特的表現(xiàn)層次。我們已經(jīng)看過了類繼承、瑞士繼承、寄生繼承、類擴展和對象擴展。這一等系列代碼復用的模式都能來自這個一直被認為是很小、很簡單的JavaScript語言。

類對象屬于“硬的”。給一個“硬的”對象添加成員的唯一的方法是建立一個新的類。在JavaScript中，對象是“軟的”。要給一個“軟”對象添加成員只要簡單的賦值就行了。

因為JavaScript中的類是這樣地靈活，你可能會還想到更復雜的類繼承。但深度繼承并不合適。淺繼承則較有效而且更易表達。