TypeScript學習筆記之五類(Class)

weixin_34234823發表於2018-12-10

一、使用環境

  • Mac 電腦
  • WebStorm
  • TypeScript3.x版本

二、類的基本介紹

如果您有其他面嚮物件語言的經驗,那麼(Class) 類 就是比較簡單的常用的型別,如果你沒有經驗,那麼我開始介紹TypeScript之前,先介紹一下概念方便您理解。

類(Class):定義了一件事物的抽象特點,包含它的屬性和方法

物件(Object):類的例項,通過 new 生成

物件導向(OOP)的三大特性:封裝、繼承、多型

封裝(Encapsulation):將對資料的操作細節隱藏起來,只暴露對外的介面。外界呼叫端不需要(也不可能)知道細節,就能通過對外提供的介面來訪問該物件,同時也保證了外界無法任意更改物件內部的資料

繼承(Inheritance):子類繼承父類,子類除了擁有父類的所有特性外,還有一些更具體的特性

多型(Polymorphism):由繼承而產生了相關的不同的類,對同一個方法可以有不同的響應。比如 Cat 和 Dog 都繼承自 Animal,但是分別實現了自己的 run 方法。此時針對某一個例項,我們無需瞭解它是 Cat 還是 Dog,就可以直接呼叫 run 方法,程式會自動判斷出來應該如何執行 run

存取器(getter & setter):用以改變屬性的讀取和賦值行為

抽象類(Abstract Class):抽象類是供其他類繼承的基類,抽象類不允許被例項化。抽象類中的抽象方法必須在子類中被實現

修飾符(Modifiers):修飾符是一些關鍵字,用於限定成員或型別的性質。比如 public 表示公有屬性或方法

介面(Interfaces):不同類之間公有的屬性或方法,可以抽象成一個介面。介面可以被類實現(implements)。一個類只能繼承自另一個類,但是可以實現多個介面

三、類的定義

使用 class 定義類,使用 constructor 定義建構函式。
類一般包括屬性 + 方法

class Greeter {
greeter : string;  //類的屬性
constructor(message:string = "預設魔術"){
    this.greeter = message;
}
//類的方法
greeting() {};
}
let  grrent = new Greeter();  //通過 new 生成新例項的時候,會自動呼叫建構函式。
console.log(grrent);

四、類的三大特點(封裝、繼承、多型)

物件導向(OOP)的三大特性:封裝、繼承、多型

4.1、類的繼承

使用 extends 關鍵字實現繼承,子類中使用 super 關鍵字來呼叫父類的建構函式和方法

//動物類
 class  AnimalClass {
 private  name : string;
 public constructor(theName:string){
    this.name = theName;
};
 public  move(movedistance : number = 0){
 console.log(`${this.name} 移動的距離是 ${movedistance}`);
};
 }
 //蛇繼承了動物類
 class Shake extends AnimalClass{
   constructor(name : string){
        super(name);   //初始化父類
   };

   move(movedistance:number =5){
       console.log("Shake...");
       super.move(movedistance);
   }
 }
//馬繼承了動物類
class House extends AnimalClass{
constructor(name : string){
    super(name);
};

move(movedistance:number =10){
    console.log("House...");
    super.move(movedistance);
}
}
let  shake = new Shake("蛇");
let  house : AnimalClass = new House("馬");
shake.move();    // 多型
house.move(50);  // 多型

五、類的存取器以及類的修飾符

使用 getter 和 setter 可以改變屬性的賦值和讀取行為

typeScript 可以使用三種訪問修飾符(Access Modifiers),分別是 public、private 和 protected。

public 修飾的屬性或方法是公有的,可以在任何地方被訪問到,預設所有的屬性和方法都是 public 的
private 修飾的屬性或方法是私有的,不能在宣告它的類的外部訪問
protected 修飾的屬性或方法是受保護的,它和 private 類似,區別是它在子類中也是允許被訪問的

 class  AnimalClass {
//只有當前類可以訪問
private  _animalName : string;
public constructor(theName:string){
    this._animalName = theName;
};
//子類可以訪問
protected  move(movedistance : number = 0){
 console.log(`${this._animalName} 移動的距離是 ${movedistance}`);
};
private jump(distance : number = 0){
    console.log(`${this._animalName} jummp ${distance}`);
}
 // getter setter存取器
set animalName(aName : string){
     this._animalName = aName;
}
get  animalName(){
    return this._animalName;
}
}

六、靜態屬性和方法、例項方法和屬性

6.1、靜態方法、靜態屬性

使用 static 修飾符修飾的方法稱為靜態方法,它們不需要例項化,而是直接通過類來呼叫

  class Animal {
   //靜態屬性
  static num = 42;  
   //靜態方法
  static isAnimal(a) {
    return a instanceof Animal;
  }
}
let a = new Animal('Jack');
Animal.isAnimal(a); // true
a.isAnimal(a); // TypeError: a.isAnimal is not a function
console.log(Animal.num); // 42
6.3、例項方法和屬性

ES6 中例項的屬性只能通過建構函式中的 this.xxx 來定義,ES7 提案中可以直接在類裡面定義

class Animal {
//例項屬性
name = 'zibin';
constructor() {
    // ...
}
}
 //例項方法
run() {};
let a = new Animal();
console.log(a.name); // zibin

七、抽象類

抽象類做為其它派生類的基類使用。 它們一般不會直接被例項化。 不同於介面,抽象類可以包含成員的實現細節。 abstract關鍵字是用於定義抽象類和在抽象類內部定義抽象方法。

 abstract class DefaultPersion {
  //抽象方法
  abstract makeSound():void;
  move():void{
      console.log('roaming the earch...');
  }
 }
類中抽取出介面

e.g門是一個類,防盜門是門的子類。如果防盜門有一個報警器的功能,我們可以簡單的給防盜門新增一個報警方法。
這時候如果有另一個類,車,也有報警器的功能,就可以考慮把報警器提取出來,作為一個介面,防盜門和車都去實現它

//介面1
interface IAlarm {
 alert();
}
//介面2繼承與介面1
interface ILight extends IAlarm{
ligintOffOrOn();
}
 //門類
class  Door {   
}
   //安全門繼承門類遵守介面規定alert方法
class SecurityDoor extends Door implements IAlarm{
  alert(){
      console.log("安全們具有報警器....");
  }
}
  //車繼承門類遵守介面規定具有alert、ligintOffOrOn 方法
class Car implements IAlarm,ILight {
alert(){
    console.log("汽車具有報警器....");
}
ligintOffOrOn(){
    console.log('Car light off');
}
}
let c = new  Car();
c.alert();
let  s =  new  SecurityDoor();
s.alert();

如需瞭解更多知識
如需瞭解更多知識
TypeScript學習筆記之五類(Class)
TypeScript學習筆記之四介面(Inferfaces)
TypeScript學習筆記之三非原始資料型別
TypeScript學習筆記之二基本資料型別
TypeScript學習筆記之一初見TypeScript

相關文章