首頁 >web前端 >js教程 >理解 Typescript 中的 this 和 Super

理解 Typescript 中的 this 和 Super

Barbara Streisand
Barbara Streisand原創
2024-12-24 03:26:171004瀏覽

在 Typescript 中,this 和 super 是物件導向程式設計中使用的關鍵字,分別指涉類別和基底類別的目前實例。


這個關鍵字

定義:指類別的目前實例。
用例

  • 存取實例屬性和方法。
  • 呼叫同一個類別中的另一個方法。
  • 將目前物件作為參數傳遞
class Pizza {
    name: string

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

    cook():void{
        console.log(`Start cooking ${this.name} pizza`)
    }
}

const pepperoniPizza = new Pizza("pepperoni");
pepperoniPizza.cook();

Understanding This and Super in Typescript

超級關鍵字

  • 定義:指目前類別的基底類別(父類別)。
  • 用例:
    • 呼叫基底類別的建構子。
    • 從基類存取方法和屬性

範例:

class Animal {
    name: string;

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

    makeSound(): void {
      console.log(`${this.name} makes a sound.`);
    }
  }

  class Dog extends Animal {
    constructor(name: string) {
      super(name); // Calls the constructor of the base class
    }

    makeSound(): void {
      super.makeSound(); // Calls the base class method
      console.log(`${this.name} barks.`);
    }
  }

  const dog = new Dog("Buddy");
  dog.makeSound();

輸出包含:基底類別的 makeSound() 是 Animal,子類別的 makeSound 是 Dog,如下:

Buddy makes a sound.
Buddy barks.

Understanding This and Super in Typescript


要點:

1。這個:

  • 總是引用目前實例
  • 可用於建構函式、方法或箭頭函式。
  • 在箭頭函數中,this 在詞法上綁定到周圍的上下文。

*2。超級:*

  • 只能在擴充另一個類別的類別中使用。
  • 在衍生類別中存取 this 之前,必須在建構函式中呼叫。
  • 可用來呼叫父類別方法。
class Parent {
  protected message: string = "Hello from Parent!";
}

class Child extends Parent {
  showMessage(): void {
    console.log(super.message); // Accesses the parent class property
  }
}

const child = new Child();
child.showMessage(); // Output: Hello from Parent!

透過正確使用 this 和 super,您可以在 Typescript 中有效管理繼承和物件行為。

以上是理解 Typescript 中的 this 和 Super的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn