JavaScript面向物件程式設計之繼承（一）
1. 原型鏈式繼承
1.1 原型模式
原型模式是JavaScript中創建物件的一種最常見的方式，JavaScript是一種弱型別的語言，沒有類的概念，也不是一種面向物件的語言，但是，在JavaScript中，借助函式的原型（也就是prototype）可以實作類的功能，
使用原型模式創建物件的基本做法如下：
function Person (name) {
this.name = name // 私有屬性
}
// 公共方法
Person.prototype.sayName = function () {
console.log(this.name)
}
// 創建實體
var personA = new Person('A')
console.log(personA.name) // A
personA.sayName() // A
var personB = new Person('B')
console.log(personB.name) // B
personB.sayName() // B
在以上代碼中，兩個實體既擁有各自不同的屬性 name, 又共享了 公有的方法 sayName()，這樣就實作了類似于強型別語言中類的概念，
這種功能的實作，就得益于建構式的prototype屬性，下圖展示了建構式、原型、實體三者之間的關系，
每個建構式都有一個屬性 prototype，prototype屬性指向一個物件，該物件被建構式的所有實體所共享，我們稱這個物件為建構式的原型，
原型與建構式之間通過prototype屬性和constructor屬性相互聯系，
實體與原型之間通過一個 _proto_屬性（是瀏覽器中存在的一個虛擬的屬性，各個瀏覽器的實作不同，谷歌中為_proto_）產生聯系，
一個建構式創建的不同的實體都可以通過 _proto_屬性 訪問到它的原型，這就是為什么上面的示例中兩個示例可以訪問到共同的 sayName() 方法的原因，
1.2 原型鏈式繼承
1.2.1 原型鏈與原型鏈式繼承
建構式的原型并不是固定不變的，我們可以人為的切斷建構式與其原型之間的聯系，也可以給建構式指定自定義的原型，
function Person (name) {
this.name = name
}
Person.prototype = {
constructor: Person,
sayName: function () {
console.log(this.name + '-hello')
}
}
var personA = new Person('A')
personA.sayName() // A-hello
上面的代碼我們自己給Person建構式指定了一個原型，并添加了一個sayName()的公共方法，
原型鏈的實作就是基于原型可以重寫這一基本前提，
我們結合下圖來說明什么是原型鏈，它與JavaScript中實作類之間的繼承的關系，
上圖中，綠色線條所形成的鏈條即被我們稱之為原型鏈，基于原型鏈，我們可以實作一種繼承方式，
以下是一段基于原型鏈實作繼承代碼示例，為了區別于Java等語言中的class關鍵字，這里以Type表示型別，同時以 Super表示父，以Sub表示子，將SuperType稱之為超型別，將SubType稱之為子型別，
function SuperType () {
this.superName = 'superName'
}
SuperType.prototype.sayName = function () {
console.log(this.name)
}
function SubType (subName) {
this.name = subName || 'subName'
}
SubType.prototype = new SuperType()
var subA = new SubType('A')
subA.sayName() // A
console.log(subA.superName) // superName
以上代碼中，我們并沒有為SubType定義sayName() 方法，SubType中也沒有superName屬性，但SubType創建的示例subA卻可以使用sayName()方法列印出 自己的name屬性，同時可以訪問到并非自身定義的 superName屬性，這是因為我們將SuperType的一個實體指定為了SubType的原型，因此subA與new SuperType()與 SuperType.prototype之間就有了一條原型鏈，subA因此可以訪問到鏈條能觸及的所有屬性和方法，
這就是原型鏈實作繼承的一個基本方式，
1.2.2 原型鏈式繼承的缺陷
盡管，在理解了原型鏈后，原型鏈式的繼承方式變得很好理解，使用也很簡單，但是，原型鏈式的繼承方式卻并非完美的實作繼承的解決方案，原型鏈式的繼承也存在其自身的問題，讓我們看一段代碼：
function SuperType () {
this.element = ['A', 'B', 'C']
}
SuperType.prototype.printElement = function () {
console.log(this.element)
}
function SubType () {
}
SubType.prototype = new SuperType()
var subA = new SubType()
subA.element.push('D')
subA.printElement() // ["A", "B", "C", "D"]
var subB = new SubType()
subB.element.push('E')
subB.printElement() // ["A,", "B", "C", "D","E"]
讓我們感到奇怪的是，兩個不同的實體分別向element屬性中各自添加不同元素后，subB中列印的element屬性中竟然包含了subA添加的元素，
這也很好理解，因為兩個實體都繼承自SuperType的同一個實體構成的原型，所以他們共享了超型別建構式中的element屬性，因此，理所應當的，前一個實體對element元素所作的更改會體現在后一個實體上，
但是，這并不是我們想要的結果，
我們知道，使用原型模式創建物件時，會把私有屬性（方法）和共有屬性（方法）分開定義，私有屬性定義在建構式中，公有屬性定義在原型中，因此，顯然，當我們使用原型鏈實作繼承時，我們不僅繼承了超型別實體的原型中的公有屬性，也繼承了其建構式中定義的私有屬性，并且本應該是私有的屬性，卻因為它成了子型別的原型，而變成了子型別的公有屬性，
這是一個令人頭疼的問題，
原型鏈式繼承的另一個問題是，子型別的建構式中，無法給超型別傳遞引數，這也局限了這種方式在實際開發中的應用，
2. 借用建構式
2.1 借用建構式實作繼承
為了解決原型鏈式繼承所帶來的問題，開發人員使用了一種新的技術，這種技術被稱為借用建構式的技術，其具體實作方法如下：
function SuperType (name) {
this.name = name || 'superName'
this.element = ['A', 'B', 'C']
}
function SubType (name) {
SuperType.apply(this, arguments) // SuperType.call(this, name)
}
var subA = new SubType('subA')
subA.element.push('D')
console.log(subA.element) // ["A", "B", "C", "D"]
console.log(subA.name) // subA
var subB = new SubType('subB')
subB.element.push('E')
console.log(subB.element) // ["A", "B", "C", "E"]
console.log(subB.name) // subB
根據程式的執行現象，我們可以看到，SubType的兩個實體，分別向element屬性中添加了不同的元素，從列印結果發現，subA中添加的元素并沒有反映到subB中，SubType的兩個實體在繼承了SuperType中的自有屬性的同時，又各自保留了其屬性的副本，
另外，在SubType建構式中，呼叫SuperType建構式時，子型別可以給超型別傳遞引數，
借用建構式看似簡單，卻解決了原型鏈式繼承中存在的兩個讓人頭疼的問題，
實際上，借用建構式的思想與我們平時編碼時常用的技巧 函式的提取 類似，下面我們通過一段代碼來簡要的講解一下這個程序（以下代碼部分為偽代碼，在此不探討其合理性）：
function SubType () {
this.propertyA = 'propertyA'
this.propertyB = 'propertyB'
this.propertyC = 'propertyC'
this.propertyD = 'propertyD'
this.propertyE = 'propertyE'
}
以上是一個子型別的建構式，其中有諸多屬性，在許多其他的子型別中，這些屬性也被需要，
這跟函數提取的場景很類似，在一個函式中，某些代碼具備一定的復用性，此時，我們很容易的想到，把這些代碼提取到一個單獨的函式中，此后只要有需要的函式，都可以復用這些代碼，這一步可以簡單實作為如下：
function SubType () {
SuperType()
}
function SuperType () {
this.propertyA = 'propertyA'
this.propertyB = 'propertyB'
this.propertyC = 'propertyC'
this.propertyD = 'propertyD'
this.propertyE = 'propertyE'
}
SubType建構式內部呼叫SuperType建構式，將SuperType中的屬性復用到SubType中，
但是，如只是簡單的提取，則會產生一個問題，SuperType中的this在SuperType被定義時，即已確定，SuperType被定義在全域作用域下，因此this指向全域作用域（一般是window），簡單的提取呼叫后，則SubType中實際上會變成這樣：
function SubType () {
window.propertyA = 'propertyA'
window.propertyB = 'propertyB'
window.propertyC = 'propertyC'
window.propertyD = 'propertyD'
window.propertyE = 'propertyE'
}
當創建SubType的新實體時，通過呼叫相應的屬性，會得到如下結果：
function SubType () {
SuperType()
}
function SuperType () {
this.propertyA = 'propertyA'
this.propertyB = 'propertyB'
this.propertyC = 'propertyC'
this.propertyD = 'propertyD'
this.propertyE = 'propertyE'
}
var subA = new SubType()
console.log(subA.propertyA) // undefined
console.log(window.propertyA) // propertyA
這與以上的描述一致，
為了讓SuperType在呼叫時，其包含的屬性能夠正確的復用到SubType中，只需要將SuperType的執行環境系結到SubType上即可，使用apply()方法和call()方法都可以很容易實作這一步，上述實作就變為：
function SubType () {
SuperType.apply(this,arguments)
}
function SuperType () {
this.propertyA = 'propertyA'
this.propertyB = 'propertyB'
this.propertyC = 'propertyC'
this.propertyD = 'propertyD'
this.propertyE = 'propertyE'
}
var subA = new SubType()
console.log(subA.propertyA) // propertyA
console.log(window.propertyA) // propertyA
以上的程序或許不夠準確，但的確可以幫助理解借用建構式的實作思路，
由以上的代碼示例，我們可以看到，借用建構式的的確確是解決了原型鏈鏈式繼承方法的缺陷，
- 每個實體都可以保持超型別中自有屬性的私有性，每個子類實體中都可以保有超型別中自有屬性的一個副本，子類實體之間對繼承而來的自有屬性的操作不會相互干擾；
- 子型別的建構式可以向超型別的建構式中傳遞引數；
2.2 借用建構式的缺陷
但是，借用建構式中也存在著令人頭疼的問題，
細心的讀者會發現，在以上的關于借用建構式講解示例中，竟沒有出現一次公共方法的呼叫，沒錯，這正是問題所在，
簡單來說就是，我（借用建構式）做不到啊，
也許你會進行一些嘗試，我給超型別的原型定義公共方法行不行呢？我直接在超型別建構式上定義一個方法行不行呢？一起來看下面這兩段代碼：
示例一：給超型別的原型定義公共方法
function SuperType (name) {
this.name = name || 'superName'
this.element = ['A', 'B', 'C']
}
SuperType.prototype.sayName = function () {
console.log(this.name)
}
function SubType (name) {
SuperType.apply(this, arguments) // SuperType.call(this, name)
}
var subA = new SubType('subA')
subA.sayName() // Uncaught TypeError: subA.sayName is not a function
毫不吃驚，程式執行出錯， subA.sayName不是一個function;
借用建構式的本質僅僅是將超型別中的屬性復制一份到子型別中，并將其屬性的執行環境系結到子型別上，因此子型別在執行完超型別建構式那一刻，子型別和超型別之間就切斷了聯系，子型別的實體又怎么可能訪問到超型別的原型方法呢，
實體二：直接在超型別建構式上定義方法
function SuperType (name) {
this.name = name || 'superName'
this.element = ['A', 'B', 'C']
this.sayName = function () {
console.log(this.name)
}
}
function SubType (name) {
SuperType.apply(this, arguments) // SuperType.call(this, name)
}
var subA = new SubType('subA')
subA.sayName() // 'subA'
var subB = new SubType('subB')
subB.sayName() // 'subB'
看似可行，實則？？？
console.log(subA.sayName === subB.sayName) // false
呃，，，，，
雖然都實作了相同的功能，但兩個方法并不是同一個方法，還是上面說的，借用建構式僅僅只是復制了一份超型別中的屬性和方法，這并不是復用，借用建構式無法實作公共方法的復用，
基于借用建構式的以下兩個缺陷：
- 無法定義子型別可復用的公共方法；
- 無法訪問超型別的原型；
借用建構式在實際應用中很少單獨使用，
3. 組合繼承
3.1 組合繼承
雖然，原型鏈模式和借用建構式模式都無法完美實作繼承，但所幸二者的缺陷可以互補，自然而然的，一種相對完美的解決方案出現了，即組合繼承，
將原型鏈式繼承和借用建構式繼承組合起來，使用原型鏈模式實作對超型別的公共屬性和公共方法的繼承，使用借用建構式模式實作對超型別中自有屬性的繼承，這樣，既通過在原型上定義方法實作了函式的復用，又能夠保證每個子類實體都能保有一份超型別中的自有屬性，
組合繼承的實作方法如下：
function SuperType (name) {
this.name = name || 'superName'
this.element = ['A', 'B', 'C']
}
SuperType.prototype.sayName = function () {
console.log(this.name)
}
SuperType.prototype.printElement = function () {
console.log(this.element)
}
function SubType (name) {
SuperType.apply(this, arguments)
}
SubType.prototype = new SuperType ()
var subA = new SubType('subA')
subA.element.push('subA')
subA.sayName() // subA
subA.printElement() // ["A", "B", "C", "subA"]
var subB = new SubType('subB')
subB.element.push('subB')
subB.sayName() // subB
subB.printElement() // ["A", "B", "C", "subB"]
console.log(subA.sayName === subB.sayName) // true
以上是一個組合繼承的示例，根據列印結果可以看到，組合模式既可以復用超型別的公用方法，子型別實體中又可以保有各自的私有屬性，
組合繼承避免了原型鏈式繼承和借用建構式繼承的缺陷，融合了它們的優點，是JavaScript中最常用的一種繼承模式，
3.2 組合繼承的缺陷
嗯，，，
組合繼承也有缺陷
下次分享——JavaScript面向物件程式設計之繼承（二）
組合式繼承的缺陷
原型式繼承
寄生式繼承
寄生組合式繼承
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/253898.html
標籤：JavaScript
上一篇：穩妥建構式模式