在上一篇文章中提到,我們可以將不同類別當中的共同屬性或方法,提取出來放在 parent 類別當中,然後透過繼承的方式,實現這些屬性或方法,同時也可以加入額外的屬性或方法。
以上次提到例子來說,BaseballPlayer
是一個 parent 類別,包含了 name
屬性和 hit
方法
class BaseballPlayer {
name: string
constructor(name: string) {
this.name = name
}
hit() {
console.log(`${this.name} can hit`)
}
}
接著,我們建立 Shortstop
類別來繼承 BaseballPlayer
class Shortstop extends BaseballPlayer {
run() {
console.log(`${this.name} can run`)
}
}
當然我們也可以建立另外一個 Outfielder
類別來繼承 BaseballPlayer
,創造出更多不同類型的 baseball players
class Outfielder extends BaseballPlayer {
run() {
console.log(`${this.name} can run very fast`)
}
}
最後,我們就可以實際創造出類別的實例,並呼叫其方法
const lindor = new Shortstop('lindor')
const betts = new Outfielder('betts')
lindor.hit() // lindor can hit
lindor.run() // lindor can run
betts.hit() // betts can hit
betts.run() // betts can run very fast
這時候,隔壁棚傳來新的需求,想要建立一個同樣可以實作出 name
屬性和 hit
方法的網球選手,於是就直接讓 TennisPlayer
去繼承 BaseballPlayer
class TennisPlayer extends BaseballPlayer {
serve() {
console.log(`${this.name} can serve`)
}
}
const federer = new Golfer('federer')
federer.hit() // federer can hit
federer.walk() // federer can serve
網球選手繼承棒球選手?雖然實作出來的結果如預期,但是看起來就非常的奇怪,而且沒有邏輯。如果今天我們繼續充實 BaseballPlayer
類別,譬如加入 pitch
方法,變成
class BaseballPlayer {
name: string
constructor(name: string) {
this.name = name
}
hit() {
console.log(`${this.name} can hit`)
}
pitch() {
console.log(`${this.name} can pitch the ball`)
}
}
結果就會發現網球選手 federer 也會開始投球了
const federer = new Golfer('federer')
federer.pitch() // federer can pitch
雖然我們可以任意的分類、抽取屬性和方法建立 parent 類別,然後任意的繼承某個類別來取得需要的屬性和方法,但這樣的「整理方式」,最終只會造成無限的混亂和錯誤發生。
所以通常在建立 parent 類別和繼承的時候,會遵循著「A 是 B 的一種」(is-a)的規則,譬如
這樣一來,就能有邏輯的模擬真實世界的狀況,也不會有意外的錯誤發生。
現在我們知道 TennisPlayer
不應該直接繼承 BaseballPlayer
,不過這看起來好像也不是什麼大問題,只要直接建立兩個完全獨立的類別,然後分別實作各種方法,像是 hit
, pitch
, serve
等等。
但是我們還是希望可以稍微整理一下,讓這個共同的方法在某種程度上被「抽取出來」或「規範」,並在未來建立其他新的類別的時候可以被使用。
接下來我們來看看幾種不同的實作方式:
class Athlete {
name: string
constructor(name: string) {
this.name = name
}
hit() {
console.log(`${this.name} can hit`)
}
}
class BaseballPlayer extends Athlete {
pitch() {
console.log(`${this.name} can pitch the ball`)
}
}
class TennisPlayer extends Athlete {
serve() {
console.log(`${this.name} can serve`)
}
}
這裡我們建立了一個 Athlete
類別,並讓 BaseballPlayer
和 TennisPlayer
分別繼承他的屬性和方法,如此一來,baseball player 和 tennis player 都可使用同樣的 hit
方法
const jeter = new BaseballPlayer('jeter')
const federer = new TennisPlayer('federer')
const someone = new Athlete('someone')
jeter.hit() // jeter can hit
federer.hit() // federer can hit
someone.hit() // someone can hit
不過這時候又發現了幾個小問題,一個是雖然我們希望 baseball player 和 tennis player 都可以使用 hit
,但是兩者實際實作 hit
的方式和細節可能不太一樣,譬如我們希望變成
jeter.hit() // jeter can hit baseball
federer.hit() // federer can hit tennis
另外一個是,也許我們不需要為 Athlete
建立實例 (e.g., someone)。我們期待各種運動選手都應該來自於各種選手的類別,然後這些類別共同繼承Athlete
。
為了解決剛才提到的問題,所以現在我們換個方式做。相對於建立一個 parent 類別,這裡我們建立一個抽象類別 Athlete
。
abstract class Athlete {
name: string
constructor(name: string) {
this.name = name
}
abstract hit(): void;
}
class BaseballPlayer extends Athlete {
hit() {
console.log(`${this.name} can hit baseball`)
}
pitch() {
console.log(`${this.name} can pitch the ball`)
}
}
class TennisPlayer extends Athlete {
hit() {
console.log(`${this.name} can hit tennis`)
}
serve() {
console.log(`${this.name} can serve`)
}
}
跟剛剛不一樣的地方是,我們無法透過抽象類別來建立實例,另一方面,我們只在這個抽象類別定義了 hit
這個方法的存在,但是沒有定義 hit
的實作細節。所以 baseball player 和 tennis player 可以有同樣的 hit
方法但是有不同的結果
const jeter = new BaseballPlayer('jeter')
const federer = new TennisPlayer('federer')
const someone = new Athlete('someone') // error
jeter.hit() // jeter can hit baseball
federer.hit() // federer can hit tennis
除了抽象類別之外,我們還可以使用介面 (interface)。介面本身定義了 hit
方法的存在,但是沒有定義它的實作方式。hit
實作的方式被定義在使用 (implements) 該介面的類別當中
interface Hit {
hit(): void;
}
class BaseballPlayer implements Hit {
name: string
constructor(name: string) {
this.name = name
}
hit() {
console.log(`${this.name} can hit baseball`)
}
pitch() {
console.log(`${this.name} can pitch the ball`)
}
}
class TennisPlayer implements Hit {
name: string
constructor(name: string) {
this.name = name
}
hit() {
console.log(`${this.name} can hit tennis`)
}
serve() {
console.log(`${this.name} can serve`)
}
}
和抽象類別一樣,介面無法建立實例
const jeter = new BaseballPlayer('jeter')
const federer = new TennisPlayer('federer')
const someone = new Hit() // error
jeter.hit() // jeter can hit baseball
federer.hit() // federer can hit tennis
不過,究竟什麼是「抽象類別」和「介面」,就讓我們下一篇文章多談一些吧!
鴕鳥是不是鳥?橢圓是不是圓形?
「馬者所以命形也,白者所以命色也;命色者,非命形也。故曰白馬非馬。」
根據生物分類法,鴕鳥屬於鳥綱,所以如果這裡的「鳥」指的是鳥綱的話,那麼「鴕鳥是鳥」就成立
不過我認為橢圓不是圓形,但兩者都屬於圓錐曲線