JavaScript - 繼承和類

在這一篇中，我要聊聊 JavaScript 中的繼承和“類”。

首先跟你請教下，到底為啥要使用繼承和類呢？

在“面向?qū)ο蟆钡木幊填I(lǐng)域里，好像需要一個“對象”的時候，就聲明這個對象的 class，然后實例化這個 class 來得到一個對象。這種做法貌似隨著面向?qū)ο蟮木幊陶Z言的廣泛使用，成了“標準”似的。在 Java、C# 這樣的編程語言中，和繼承以及類相關(guān)的有很多的概念，形成了一個龐大、復(fù)雜的體系。但是至少我在了解這些的時候沒有思考過，到底是因為什么導(dǎo)致我們需要這些東西呢？或者說，使用繼承和類，是為了解決怎樣的根本性的問題呢？

（當然，有些問題由于提問者本身認知的局限性，可能本就不是值得回答的^_）

有一種說法，是我在學(xué)習 JavaScript 的過程中了解到的，說是繼承這個東西本意是為了“代碼復(fù)用”。我目前是比較認同這種看法，不過沒有了解到更多的經(jīng)典說法，所以沒有更多的比較。或許從 Java 程序員的你這里，我可以學(xué)到更多，甚至在這個問題的看法上，我會有很大的改變也說不定。不過，限于目前的認知情況，我就繼續(xù)按這個思路聊啦。

創(chuàng)建一個抽象的類，將具體的屬性、方法綁定到這個類上，然后實例化得到的該類型的對象就擁有了這些屬性、方法。嗯，的確是很自然的。其中有個細節(jié)，我特意說下，可能并不重要。就是，同一類的不同對象，方法是相同的，只是屬性值可能不同。因為屬性值可以看做是對象攜帶的數(shù)據(jù)，對于不同的對象而言是不同的，如果完全相同，或許就沒有必要創(chuàng)建兩個對象了不是（當然對于特殊的，如常量，就不是如此了）。這個體現(xiàn)在 JavaScript 中的話，應(yīng)該是下面這個樣子：

function Person(name) {
    this.name = name;
}

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

而不能是：

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

原因就在于，后面的這種方式下，每個以 new Person('xxx') 這種方式創(chuàng)建的對象，都有自己的 getName() 方法，而不是相同的方法。從對象屬性的這個角度來解釋，就是前一種方式下，新創(chuàng)建的對象并沒有名稱為 getName 的屬性，而后一種有。但是前一種也能夠使用到這個方法，是因為得到的對象“繼承”到了這個方法。下面就引出 JavaScript 中的繼承了。

JavaScript 中的繼承

JavaScript 中的繼承基于原型（prototype）的。JavaScript 中沒有“類”的存在，繼承是指一個對象從另一個對象那里繼承。由于可以一級級地繼承下去，所以會產(chǎn)生一個繼承鏈。于是，在試圖獲取一個對象的屬性時，如果這個對象本身沒有定義，則會到它的原型對象那里去找找，再沒有的話就繼續(xù)往上一級的原型對象里查找，直到找到或達到最頂級的原型對象（具體是什么我不了解，就不亂說了）那里。另外，當前對象中定義了的屬性，會“覆蓋”從原型對象那里繼承的屬性。這一點不難理解，因為在當前對象找到了就不會往上查找了嘛。不過由于 JavaScript 是動態(tài)語言，執(zhí)行過程中可能會刪除對象的屬性，這個時候從原型對象中繼承的屬性就又會暴露出來了。這種“鏈”的機制，和作用域鏈有點類似，在函數(shù)中，一個變量名稱在當前函數(shù)作用域下找不到的時候，就會往上一級查找，而如果在當前函數(shù)作用域中有定義，則會覆蓋上級中的同名變量。

最清晰不過的話，應(yīng)該給一張圖，我該用心畫一張，不過想想，還是推薦去看看書里的圖吧。

再次強調(diào)下，我理解的 JavaScript 中的繼承，就是一個對象到另一個對象，沒有類參與其中。

這種“原型”方式的繼承，應(yīng)該是比較直觀和易理解的，不說更多了。

JavaScript 中的“類”

然而，JavaScript 這門擁有各種特性的語言里，還就是有“類”的身影。像上面的第一個例子里，會涉及到幾個詞：構(gòu)造函數(shù)（constructor）、原型對象（prototype）、實例對象（instance）。對，實際上沒有類，但是這些東西整體的作用，給人一種定義了一個叫做“Person”的類的錯覺。

具體來說下上面的第一個例子。

首先說 Person，它是一個首先是一個函數(shù)，這很明顯。只有被以 new Person(...) 這種方式使用時，我們才可以說它是一個構(gòu)造函數(shù)。為什么呢？因為這種方式通常情況下會返回一個新的實例對象，是誰的實例呢？不是這個構(gòu)造函數(shù)的，而是這個構(gòu)造函數(shù)所參與構(gòu)造的這個看不到的，但是貌似存在的“類”。這么說是不是很難讓人明白？

函數(shù)作為構(gòu)造函數(shù)被使用是，它的 prototype 屬性是有特殊的用途。在這種情況下，這個屬性所指向的對象，會被作為得到的實例對象的原型對象使用。也就是說，通過構(gòu)造函數(shù)的 prototype 屬性來連接實例對象和它的原型對象，不過實際對于一個已經(jīng)存在的對象來說，并不需要這個構(gòu)造函數(shù)來持續(xù)維系這種關(guān)聯(lián)關(guān)系。對象可以直接找到它的原型對象（如果有的話），有的運行環(huán)境下還提供了一些特殊的屬性、方法來做這些事情，這個推薦大家看相關(guān)資料，我就不亂說了。

原型對象其實還可以通過 constructor 屬性來關(guān)聯(lián)對應(yīng)的構(gòu)造函數(shù)，不過這對于繼承這件事情來說并不是必須，而且很多時候甚至沒有這種屬性，例如上面的例子中如果是以明確的對象來給出原型對象的話：

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

這個直接聲明的對象顯然沒有 constructor 屬性，所以最上面的例子中，其實隱含著一個已經(jīng)有的原型對象（Person.prototype），只不過是向這個原型對象中設(shè)置了新的屬性而已。然而這里的用法就是給 Person 的 prototype 屬性指定了新的對象了，所以還是不同的。

另外，JavaScript 中可以用 obj instanceof class 來判斷一個對象是否為“類”（當然這里的 class 其實是構(gòu)造函數(shù)）的實例。仔細研究下這個 instanceof 還是會有些收獲的，這里推薦去看下相關(guān)資料（在 MDN 搜索下吧）。

綜上，構(gòu)造函數(shù)、原型對象，再加上使用 new Constructor(...) 這種方式來獲得實例對象，一起構(gòu)造了一個“偽類”的機制，使得初次看到這個的 Java 程序員們可能因為熟悉而掉進了這個“坑”里。

有一點需要注意，在最上面的例子中，雖然看起來定義了一個類，但如果使用方式不當，還是會有問題的，例如：

var me = Person('luobo');
me.getName(); // 報錯！

這里之所以會報錯，是因為沒有用 new Person('luobo') 這種形式來創(chuàng)建對象。因為 Person 只是一個普通函數(shù)，如果沒有以 new ... 的方式來使用的，就是一個普通的函數(shù)調(diào)用而已。特別地，因為在 Person 中這樣寫著：

this.name = name;

此時，由于 this 并沒有指定為特定的對象，所以可能會被設(shè)置為全局對象（瀏覽器下面的 window 對象），因而可能成了給全局對象添加屬性！

這一切并不會因為“顯式”地給函數(shù)名稱首字母大寫，并“顯式”操作了函數(shù)的 prototype 屬性而有所不同。如果想避免這種情況，防止構(gòu)造函數(shù)使用時忘了加 new 出現(xiàn)問題，可以這樣：

function Person(name) {
    if (!(this instanceof Person) {
        return new Person(name);
    }
    this.name = name;
}

還可以將真正的構(gòu)造函數(shù)另外定義，例如：

function Person(name) {
    return new Person.init(name);
}

Person.init = function (name) {
    this.name = name;
};

jQuery 使用的是類似這種方式，另外還將 jQuery.prototype 暴露為 jQuery.fn，以方便對原型對象進行操作（例如插件擴展時就可以：$.fn.pluginName = ...）：

var jQuery = function( selector, context ) {
    return new jQuery.fn.init( selector, context );
};

jQuery.fn = jQuery.prototype = { /* ... */ }

var init = jQuery.fn.init = function( selector, context ) { /* ... */ }

init.prototype = jQuery.fn;

上面是從 jQuery 源碼中摘出來的一部分。

回到最初

盡管在 JavaScript 中有這種模仿類的機制，而且也在實踐中被使用著。但如果只是為了解決“代碼復(fù)用”的問題，這并不是唯一的方法，也不見得是最好的。在一些書中會有更多、更詳盡的討論，感興趣可以找來看看。我想關(guān)于這個問題，主要還是由于“函數(shù)”在 JavaScript 中的特殊地位造成的，從復(fù)用方法這個角度來說，任何方法基本上都可以被復(fù)用，甚至根本不需要借助“繼承”來實現(xiàn)。例如：

function foo(name) {
    // 獲得除 name 外其他在函數(shù)調(diào)用時傳入的參數(shù)
    // 例如 foo('luobo', 1, 'abc') ==> otherArgs: [1, 'abc']
    // 由于 arguments 并非數(shù)組對象，沒有截取部分元素的方法，
    // 這里借助數(shù)組對象的 slice 方法來實現(xiàn)
    var otherArgs = [].slice.call(arguments, 1);
    // ...
}

好了，就寫到這吧。