TypeScript（5）類、繼承、多態

来源:https://www.cnblogs.com/jiakecong/archive/2022/06/20/16392796.html
-Advertisement-
Play Games

前言 對於傳統的 JavaScript 程式我們會使用函數和基於原型的繼承來創建可重用的組件，但對於熟悉使用面向對象方式的程式員使用這些語法就有些棘手，因為他們用的是基於類的繼承並且對象是由類構建出來的。 從 ECMAScript 2015，也就是 ES6 開始， JavaScript 程式員將能夠 ...


前言

對於傳統的 JavaScript 程式我們會使用函數和基於原型的繼承來創建可重用的組件，但對於熟悉使用面向對象方式的程式員使用這些語法就有些棘手，因為他們用的是基於類的繼承並且對象是由類構建出來的。 從 ECMAScript 2015，也就是 ES6 開始， JavaScript 程式員將能夠使用基於類的面向對象的方式。 使用 TypeScript，我們允許開發者現在就使用這些特性，並且編譯後的 JavaScript 可以在所有主流瀏覽器和平臺上運行，而不需要等到下個 JavaScript 版本。
 

類

// 類
(() => {
    class Person {
        // 聲明屬性
        name: string
        age: number
        gender: string
        // 構造方法
        constructor(name: string='jkc', age:number=18, gender:string='男') {
            this.name = name
            this.age = age
            this.gender = gender
        }
        // 一般方法
        sayHi(str: string){
            console.log(`你好，我叫${this.name},今年${this.age}歲，性別${this.gender}, 我想說：`, str)
        }
    }
    // 創建類的實例
    const person = new Person()
    // 調用實例的方法
    person.sayHi('我很帥')
})()

如果你使用過C#或Java，你會對這種語法非常熟悉。我們聲明瞭一個Person類。這個類有3個屬性、一個構造函數和一個sayHi方法。
我們使用new構造了Person類的一個實例。它會調用構造函數，創建一個Person類型的新對象，並執行構造函數初始化它。最後通過person對象調用其sayHi方法
 

繼承

在 TypeScript 里，我們可以使用常用的面向對象模式。 基於類的程式設計中一種最基本的模式是允許使用繼承來擴展現有的類。

class Animal {
    name: string
    constructor (name: string) {
        this.name = name
    }
    run (distance: number=0) {
        console.log(`${this.name} run ${distance}m`)
    }
}

class Snake extends Animal {
    constructor (name: string) {
        // 調用父類型構造方法
        super(name)
    }
    // 重寫父類的方法
    run (distance: number=5) {
        console.log('sliding...')
        super.run(distance)
    }
}

class Horse extends Animal {
    constructor (name: string) {
        // 調用父類型構造方法
        super(name)
    }
    // 重寫父類型的方法
    run (distance: number=50) {
        console.log('dashing...')
        // 調用父類型的一般方法
        super.run(distance)
    }
    xxx () {
        console.log('xxx()')
    }
}

const snake = new Snake('sn')   
snake.run()
const horse = new Horse('ho')
horse.run()

我們定義了一個超類Animal，兩個派生類Snake和Horse，並且創建了2個實例對象snake和horse。
通過snake.run()，我們可以看到Snake中有run方法，那麼就進行調用，最後結果如下

通過horse.run()，我們可以看到Horse中有run方法，那麼進行調用，最後結果如下：

 

多態

定義：不同類型的對象針對相同的方法，產生了不同的的行為
 
接著上面的代碼

// 父類型引用指向子類型的實例 ==> 多態
const tom: Animal = new Horse('ho22')
tom.run()
/* 如果子類型沒有擴展的方法, 可以讓子類型引用指向父類型的實例 */
const tom3: Snake = new Animal('tom3')
tom3.run()
/* 如果子類型有擴展的方法, 不能讓子類型引用指向父類型的實例 */
const tom2: Horse = new Animal('tom2')
tom2.run()

這個例子演示瞭如何在子類里可以重寫父類的方法。Snake類和 Horse 類都創建了 run 方法，它們重寫了從 Animal 繼承來的 run 方法，使得 run 方法根據不同的類而具有不同的功能。註意，即使 tom 被聲明為 Animal 類型，但因為它的值是 Horse，調用 tom.run(34) 時，它會調用 Horse 里重寫的方法。

 

公共，私有與受保護的修飾符

預設為public

在上面的例子里，我們可以自由的訪問程式里定義的成員。 如果你對其它語言中的類比較瞭解，就會註意到我們在之前的代碼里並沒有使用 public來做修飾；例如，C#要求必須明確地使用 public指定成員是可見的。 在TypeScript里，成員都預設為 public。
 
你也可以明確的將一個成員標記成 public。 我們可以用下麵的方式來重寫上面的 Animal類：

class Animal {
    public name: string;
    public constructor(theName: string) { this.name = theName; }
    public move(distanceInMeters: number) {
        console.log(`${this.name} moved ${distanceInMeters}m.`);
    }
}

 

理解private

當成員被標記成 private時，它就不能在聲明它的類的外部訪問。比如：

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

new Animal("Cat").name; // 錯誤: 'name' 是私有的.

 

理解 protected

protected 修飾符與 private 修飾符的行為很相似，但有一點不同，protected成員在派生類中仍然可以訪問。例如

class Animal {
    public name: string

    public constructor (name: string) {
        this.name = name
    }

    public run (distance: number=0) {
        console.log(`${this.name} run ${distance}m`)
    }
}

class Person extends Animal {
    private age: number = 18
    protected sex: string = '男'

    run (distance: number=5) {
        console.log('Person jumping...')
        super.run(distance)
    }
}

class Student extends Person {
    run (distance: number=6) {
        console.log('Student jumping...')

        console.log(this.sex) // 子類能看到父類中受保護的成員
        // console.log(this.age) //  子類看不到父類中私有的成員

        super.run(distance)
    }
}

console.log(new Person('abc').name) // 公開的可見
// console.log(new Person('abc').sex) // 受保護的不可見
// console.log(new Person('abc').age) //  私有的不可見

 

readonly修飾符

你可以使用 readonly關鍵字將屬性設置為只讀的。 只讀屬性必須在聲明時或構造函數里被初始化。

class Person {
    readonly name: string = 'abc'
    constructor(name: string) {
        this.name = name
    }
}

let john = new Person('John')
// john.name = 'peter' // error

 

參數屬性

在上面的例子中，我們必須在 Person 類里定義一個只讀成員 name 和一個參數為 name 的構造函數，並且立刻將 name 的值賦給 this.name，這種情況經常會遇到。 參數屬性可以方便地讓我們在一個地方定義並初始化一個成員。 下麵的例子是對之前 Person 類的修改版，使用了參數屬性

class Person2 {
  constructor(readonly name: string) {
  }
}

const p = new Person2('jack')
console.log(p.name)

註意看我們是如何捨棄參數 name，僅在構造函數里使用 readonly name: string 參數來創建和初始化 name 成員。 我們把聲明和賦值合併至一處。
 
參數屬性通過給構造函數參數前面添加一個訪問限定符來聲明。使用 private 限定一個參數屬性會聲明並初始化一個私有成員；對於 public 和 protected 來說也是一樣。
 

存取器

TypeScript 支持通過 getters/setters 來截取對對象成員的訪問。 它能幫助你有效的控制對對象成員的訪問。
 
下麵來看如何把一個簡單的類改寫成使用 get 和 set。 首先，我們從一個沒有使用存取器的例子開始。

class P{
    firstName: string = 'A'
    lastName: string = 'B'
    get fullName() {
        return this.firstName + '_' + this.lastName
    }
    set fullName(value) {
        const names = value.split('_')
        this.firstName = names[0]
        this.lastName = names[1]
    }
}

const p = new P()
console.log(p.fullName)

p.firstName = 'C'
p.lastName = 'D'
console.log(p.fullName)

p.fullName = 'E_F'
console.log(p.firstName, p.lastName)


 

靜態屬性

靜態成員：在類中通過static修飾的屬性或方法，也就是靜態成員或靜態方法，靜態成員在使用時是通過類名.的這種語法來調用

class People{
    static name1: string = 'jkc'
    // 構造函數是不能通過static修飾的
    constructor() {
    }
    static sayHi() {
        console.log("hello")
    }
}


People.name1 = 'jkc2'
console.log(People.name1)
People.sayHi()

 

抽象類

抽象類：包含抽象方法(抽象方法一般沒有任何具體的內容的實現)，也可以包含實例方法，抽象類是不能被實例化，為了讓子類進行實例化及實現內部的抽象方法。

abstract class P1 {
    // 抽象方法不能有具體的實現代碼
    abstract eat()
    sayHi() {
        console.log('hello')
    }
}

class P2 extends P1 {
    eat() {
        // 重新實現抽象類中的方法，此時這個方式是P2的實例方法
        console.log("吃東西")
    }
}

const p2 = new P2()
p2.eat()

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • k8s單master集群部署
    鏡像下載、功能變數名稱解析、時間同步請點擊 阿裡雲開源鏡像站 1. 伺服器要求： 建議最小硬體配置：2核CPU、2G記憶體、20G硬碟 伺服器最好可以訪問外網，會有從網上拉取鏡像需求，如果伺服器不能上網，需要提前下載對應鏡像並導入節點 1.1 軟體環境： 1.2 伺服器規劃： 1.3 架構圖： 2. 操作系統 ...
  • ClickHouse(02)ClickHouse架構設計介紹概述與ClickHouse數據分片設計
    ClickHouse核心架構設計是怎麼樣的？ClickHouse核心架構模塊分為兩個部分：ClickHouse執行過程架構和ClickHouse數據存儲架構，下麵分別詳細介紹。 ClickHouse執行過程架構 總的來說，結合目前搜集到的一些資料，可以看到目前ClickHouse核心架構由下圖構成， ...
  • 基於開源大數據調度系統Taier的Web前端架構選型及技術實踐
    原文鏈接：基於開源大數據調度系統Taier的Web前端架構選型及技術實踐 課件獲取：關註公眾號**“數棧研習社”，後臺私信“Taier”**獲得直播課件 視頻回放：點擊這裡 Taier開源項目地址：github丨gitee 上兩期，我們為大家分享了Taier入門及控制台的介紹，本期我們為大家分享Ta ...
  • 雲娜：從計算、存儲角度，談網易數據治理工具產品實踐
    **導讀：**在公司內部，業務線經常面臨數據有哪些、質量如何、是否可用、能產生多大價值的困惑，並且，隨著數據量的增加，計算和存儲資源面臨瓶頸。本次將圍繞數據治理重點關註的計算、存儲等方面，分享數據治理的產品實踐。通過分享，一方面可以瞭解當前業務線主要面臨的待治理的數據問題；另一方面，從計算、存儲等主 ...
  • 牛客SQL刷題第一趴——非技術入門基礎篇
    user_profile表： id device_id gender age university province 1 2138 male 21 北京大學 Beijing 2 3214 male 復旦大學 Shanghai 3 6543 female 20 北京大學 Beijing 4 2315 ...
  • 華為機器學習服務銀行卡識別功能，一鍵實現銀行卡識別與綁定
    隨著科技的發展，用戶通過網路進行線上支付越來越方便。平時上網購物、交水電費、轉賬匯款等都需要綁定銀行卡，但要手動輸入16-19位銀行卡號，速度慢、易出錯始終是線上移動支付的一個“硬傷”。為了給移動商業企業的用戶打造優質的支付體驗，簡化操作程式已經成為提升企業競爭力的重要手段。因此，使用華為機器學習服 ...
  • 如何使用lerna進行多包(package)管理
    為什麼要用lerna 將大型代碼倉庫分割成多個獨立版本化的 軟體包（package）對於代碼共用來說非常有用。但是，如果某些更改 跨越了多個代碼倉庫的話將變得很 麻煩 並且難以跟蹤，並且， 跨越多個代碼倉庫的測試將迅速變得非常複雜。 為瞭解決這些（以及許多其它）問題，某些項目會將 代碼倉庫分割成多個 ...
  • 什麼是組件
    組件的出現是為了實現以下兩個目標： 降低整體複雜度，提升代碼的可讀性和可維護性 提升局部代碼的可復用性 絕大部分情況下，一個組件就是頁面中某個區域，組件包含該區域的： 功能（JS代碼） 內容（模板代碼） 樣式（CSS代碼） 要在組件中包含樣式，需要構建工具的支撐 組件開發 創建組件 組件是根據一個普 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類