>웹 프론트엔드 >JS 튜토리얼 >Typescript에서 이것과 Super 이해하기

Typescript에서 이것과 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. 이:

  • 항상 현재 인스턴스를 나타냅니다.
  • 생성자, 메서드, 화살표 함수에서 사용할 수 있습니다.
  • 화살표 함수에서 이는 주변 컨텍스트에 어휘적으로 바인딩됩니다.

*2. 슈퍼: *

  • 다른 클래스를 확장하는 클래스에만 사용할 수 있습니다.
  • 파생 클래스에서 이에 액세스하기 전에 생성자에서 호출해야 합니다.
  • 상위 클래스 메서드를 호출하는 데 사용할 수 있습니다.
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!

이것과 super를 정확하게 사용하면 Typescript에서 상속과 객체 동작을 효과적으로 관리할 수 있습니다.

위 내용은 Typescript에서 이것과 Super 이해하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.