JavaScript - 繼承和類
在這一篇中，我要聊聊 JavaScript 中的繼承和“類”。
首先跟你請教下，到底為啥要使用繼承和類呢？
在“面向對象”的編程領域里，好像需要一個“對象”的時候，就聲明這個對象的 class，然后實例化這個 class 來得到一個對象。這種做法貌似隨著面向對象的編程語言的廣泛使用，成了“標準”似的。在 Java、C# 這樣的編程語言中，和繼承以及類相關的有很多的概念，形成了一個龐大、復雜的體系。但是至少我在了解這些的時候沒有思考過，到底是因為什么導致我們需要這些東西呢？或者說，使用繼承和類，是為了解決怎樣的根本性的問題呢？
（當然，有些問題由于提問者本身認知的局限性，可能本就不是值得回答的_）
有一種說法，是我在學習 JavaScript 的過程中了解到的，說是繼承這個東西本意是為了“代碼復用”。我目前是比較認同這種看法，不過沒有了解到更多的經典說法，所以沒有更多的比較。或許從 Java 程序員的你這里，我可以學到更多，甚至在這個問題的看法上，我會有很大的改變也說不定。不過，限于目前的認知情況，我就繼續按這個思路聊啦。
創建一個抽象的類，將具體的屬性、方法綁定到這個類上，然后實例化得到的該類型的對象就擁有了這些屬性、方法。嗯，的確是很自然的。其中有個細節，我特意說下，可能并不重要。就是，同一類的不同對象，方法是相同的，只是屬性值可能不同。因為屬性值可以看做是對象攜帶的數據，對于不同的對象而言是不同的，如果完全相同，或許就沒有必要創建兩個對象了不是（當然對于特殊的，如常量，就不是如此了）。這個體現在 JavaScript 中的話，應該是下面這個樣子：
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') 這種方式創建的對象，都有自己的 getName() 方法，而不是相同的方法。從對象屬性的這個角度來解釋，就是前一種方式下，新創建的對象并沒有名稱為 getName 的屬性，而后一種有。但是前一種也能夠使用到這個方法，是因為得到的對象“繼承”到了這個方法。下面就引出 JavaScript 中的繼承了。
JavaScript 中的繼承
JavaScript 中的繼承基于原型（prototype）的。JavaScript 中沒有“類”的存在，繼承是指一個對象從另一個對象那里繼承。由于可以一級級地繼承下去，所以會產生一個繼承鏈。于是，在試圖獲取一個對象的屬性時，如果這個對象本身沒有定義，則會到它的原型對象那里去找找，再沒有的話就繼續往上一級的原型對象里查找，直到找到或達到最頂級的原型對象（具體是什么我不了解，就不亂說了）那里。另外，當前對象中定義了的屬性，會“覆蓋”從原型對象那里繼承的屬性。這一點不難理解，因為在當前對象找到了就不會往上查找了嘛。不過由于 JavaScript 是動態語言，執行過程中可能會刪除對象的屬性，這個時候從原型對象中繼承的屬性就又會暴露出來了。這種“鏈”的機制，和作用域鏈有點類似，在函數中，一個變量名稱在當前函數作用域下找不到的時候，就會往上一級查找，而如果在當前函數作用域中有定義，則會覆蓋上級中的同名變量。
最清晰不過的話，應該給一張圖，我該用心畫一張，不過想想，還是推薦去看看書里的圖吧。
再次強調下，我理解的 JavaScript 中的繼承，就是一個對象到另一個對象，沒有類參與其中。
這種“原型”方式的繼承，應該是比較直觀和易理解的，不說更多了。
JavaScript 中的“類”
然而，JavaScript 這門擁有各種特性的語言里，還就是有“類”的身影。像上面的第一個例子里，會涉及到幾個詞：構造函數（constructor）、原型對象（prototype）、實例對象（instance）。對，實際上沒有類，但是這些東西整體的作用，給人一種定義了一個叫做“Person”的類的錯覺。
具體來說下上面的第一個例子。
首先說 Person，它是一個首先是一個函數，這很明顯。只有被以 new Person(...) 這種方式使用時，我們才可以說它是一個構造函數。為什么呢？因為這種方式通常情況下會返回一個新的實例對象，是誰的實例呢？不是這個構造函數的，而是這個構造函數所參與構造的這個看不到的，但是貌似存在的“類”。這么說是不是很難讓人明白？
函數作為構造函數被使用是，它的 prototype 屬性是有特殊的用途。在這種情況下，這個屬性所指向的對象，會被作為得到的實例對象的原型對象使用。也就是說，通過構造函數的 prototype 屬性來連接實例對象和它的原型對象，不過實際對于一個已經存在的對象來說，并不需要這個構造函數來持續維系這種關聯關系。對象可以直接找到它的原型對象（如果有的話），有的運行環境下還提供了一些特殊的屬性、方法來做這些事情，這個推薦大家看相關資料，我就不亂說了。
原型對象其實還可以通過 constructor 屬性來關聯對應的構造函數，不過這對于繼承這件事情來說并不是必須，而且很多時候甚至沒有這種屬性，例如上面的例子中如果是以明確的對象來給出原型對象的話：
Person.prototype = {
getName: function () {
return this.name;
}
};
這個直接聲明的對象顯然沒有 constructor 屬性，所以最上面的例子中，其實隱含著一個已經有的原型對象（Person.prototype），只不過是向這個原型對象中設置了新的屬性而已。然而這里的用法就是給 Person 的 prototype 屬性指定了新的對象了，所以還是不同的。
另外，JavaScript 中可以用 obj instanceof class 來判斷一個對象是否為“類”（當然這里的 class 其實是構造函數）的實例。仔細研究下這個 instanceof 還是會有些收獲的，這里推薦去看下相關資料（在 MDN 搜索下吧）。
綜上，構造函數、原型對象，再加上使用 new Constructor(...) 這種方式來獲得實例對象，一起構造了一個“偽類”的機制，使得初次看到這個的 Java 程序員們可能因為熟悉而掉進了這個“坑”里。
有一點需要注意，在最上面的例子中，雖然看起來定義了一個類，但如果使用方式不當，還是會有問題的，例如：
var me = Person('luobo');
me.getName(); // 報錯！
這里之所以會報錯，是因為沒有用 new Person('luobo') 這種形式來創建對象。因為 Person 只是一個普通函數，如果沒有以 new ... 的方式來使用的，就是一個普通的函數調用而已。特別地，因為在 Person 中這樣寫著：
this.name = name;
此時，由于 this 并沒有指定為特定的對象，所以可能會被設置為全局對象（瀏覽器下面的 window 對象），因而可能成了給全局對象添加屬性！
這一切并不會因為“顯式”地給函數名稱首字母大寫，并“顯式”操作了函數的 prototype 屬性而有所不同。如果想避免這種情況，防止構造函數使用時忘了加 new 出現問題，可以這樣：
function Person(name) {
if (!(this instanceof Person) {
return new Person(name);
}
this.name = name;
}
還可以將真正的構造函數另外定義，例如：
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 中有這種模仿類的機制，而且也在實踐中被使用著。但如果只是為了解決“代碼復用”的問題，這并不是唯一的方法，也不見得是最好的。在一些書中會有更多、更詳盡的討論，感興趣可以找來看看。我想關于這個問題，主要還是由于“函數”在 JavaScript 中的特殊地位造成的，從復用方法這個角度來說，任何方法基本上都可以被復用，甚至根本不需要借助“繼承”來實現。例如：
function foo(name) {
// 獲得除 name 外其他在函數調用時傳入的參數
// 例如 foo('luobo', 1, 'abc') ==> otherArgs: [1, 'abc']
// 由于 arguments 并非數組對象，沒有截取部分元素的方法，
// 這里借助數組對象的 slice 方法來實現
var otherArgs = [].slice.call(arguments, 1);
// ...
}
好了，就寫到這吧。
