TypeScript(6) 物件繼承

TypeScript(6) 物件繼承

了解物件可以有私有/保護屬性之後,接下來我們要來看物件的繼承,繼承可以讓一個全新的類別被實體化(new 出來)的時候,就能夠直接取用某個類別的方法。通常我們稱被繼承的類別為「父類別」,繼承別人的物件稱為「子類別」。

題外話,早期 Javascript 必須透過 property 來達到繼承,但 ES6 之後也有類別(class)繼承的做法。

假設我今天想要寫一隻程式來記錄動物的行為,於是我創造了一個 Animal 類別,裡面有一個 move 方法,可以描述某個動物移動了幾步。

class Animal {   
    name:string;
    constructor(theName: string) { this.name = theName; }
     move(meters: number) {
        console.log((this.name + " moved " + meters + "m."))
    }
  }

但動物有很多種,我想細分動物的種類,也一樣共用描述行為的這些方法,該怎麼做到?這時候就需要用到繼承,Typescript 裡面使用 extends 語法來進行繼承。

class Snake extends Animal {  

    constructor(name: string) { 
        super(name);  
    }

    move() {  
        super.move(5);  
    }
}

並且使用 super 來取得父類別的屬性以及方法(也就是 Animal ),且記得如果在子類別有使用建構子,一開始要先使用spuer()呼叫父類別建構子,否則會報錯。

在Snake裡面如果寫入跟父類別 Animal 相同的方法,我們就稱這個動作為「複寫」(覆蓋掉父類別方法),但是以上述程式碼為例,就算不複寫,snake 一樣可以直接調用 move 方法(因為繼承。

TypeScript(5) 物件屬性的修飾子

Typescript 跟一般 OOP 的語言寫法相似,所以講到物件一定少不了一些物件的基本觀念,修飾子是用來規定物件屬性(或稱成員) 存取權限的關鍵字,大致有以下三種:

  • public 公有屬性,可以被自由存取的屬性
  • private 私有屬性,只限於該屬性所屬的類別內可以存取
  • protected 受保護屬性,除了該屬性所屬類別,該類別之子類別(繼承該類別的類別)內也能存取。

修飾子使用方式

Typescript 裡面,沒有加上修飾子的屬性,預設都會被認為是public,如果想要加上其他修飾子的話,只要在變數宣告前面加上修飾子就可以了:

class Person {
    private name: string;
    constructor(name: string) { this.name = name; }
}

Getter / Setter

我們可以透過 getter 以及 setter 來當作統一出入口,來對無法直接存取的私有變數進行操作, getter 及 setter 跟 JS ES6 的使用方式相同。

 class Person {
    protected name: string;
    constructor(name: string) { this.name = name; }
}


class Employee extends Person {
    
    constructor(name:string){
        super(name) //把 name 傳給父類別的建構子
    } 
    get nameGetter():string{
        return this.name
    }
    set nameSetter(value){
        this.name = value 
    }
    
}

let Jack = new Employee('Jack') 
console.log(Jack)
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×

> 56
rails 7
react 1
ruby 7
ruby on rails 7
typeScript 2
typescript 4
vue 1
vue.js 1
w3HexSchool 5
working 2
地下城 5
鐵人賽30天 30
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×