JavaScript中的類繼承

Douglas Crockford
www.crockford.com

翻譯 ShiningRay

www.nirvanastudio.org

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

• John Lennon

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

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

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

要展示這一點，我們要介紹一個小小的“甜點”可以主我們像一個常規(guī)的類語言一樣寫代碼。我們?nèi)缓髸故疽恍┰陬愓Z言中沒有的有用的模式。最后，我們會就會解釋這些“甜點”。

類繼承

首先，我們建立一個Parenizor 類，它有成員 value 的get和set方法，還有一個會將value包裝在括號內(nèi)的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 。它令一個方法調(diào)用父類的方法（更改了名稱是為了避免和保留字沖突）.

我們可以寫成這樣

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 是不是在一個指定范圍內(nèi)的一個數(shù)，并在適當?shù)臅r候拋出異常。我們只要它的 setValue 和 setRange 方法給我們的 ZParenizor 。我們當然不想要它的 toString 方法。這樣，我們寫到：

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

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

寄生繼承

這是另一個書寫 ZParenizor 類的方法。并不從 Parenizor 繼承，而是寫了一個調(diào)用了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)性讓我們可以對一個已有的類添加或替換方法。我們可以在任何時候調(diào)用方法。我們可以隨時地擴展一個類。繼承不是這個方式。所以我們把這種情況稱為“類擴展”來避免和Java的 extends ──也叫擴展，但不是一回事──相混淆。

對象擴展

在靜態(tài)面向?qū)ο笳Z言中，如果你想要一個對象和另一個對象有所區(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 方法，它會指出一個類是繼承自另一個類的。它必須在兩個類都定義完了之后才能定義，但要在方法繼承之前調(diào)用。

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 語句調(diào)用了函數(shù)的apply方法來調(diào)用該函數(shù)，同時顯示地設置 this并傳遞參數(shù)。參數(shù)（如果有的話）可以從arguments 數(shù)組中獲得。不幸的是， arguments 數(shù)組并不是一個真正的數(shù)組，所以我們又要用到 apply 來調(diào)用數(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中的類是這樣地靈活，你可能會還想到更復雜的類繼承。但深度繼承并不合適。淺繼承則較有效而且更易表達。