In Typescript, this
and super
are keywords used in object-oriented programming to refer to the current instance of a class and the base class, respectively.
This
keyword
Definition: Refers to the current instance of the class.
Use Case:
- Access instance properties and methods.
- Call another method within the same class.
- Pass the current object as an argument
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();
super
keyword
- Definition: Refers to the base class (the parent class) of the current class.
- Use Cases:
- Call the constructor of the base class.
- Access methods and properties from the base class
Example:
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();
and the output include: makeSound() of Base Class is Animal and makeSound of subclass is Dog like this:
Buddy makes a sound. Buddy barks.
Key Points:
1. this
:
- Alway refers to the current instance
- Can be used in constructor, method, or arrow functions.
- In arrow functions,
this
is lexically bound to the surrounding context.
2. super
:
- Can only be used in classes that extend another class.
- Must be called in the constructor before accessing
this
in a derived class. - Can be used to call parent class methods.
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!
By using this
and super
correctly, you can manage inheritance and object behavior effectively in Typescript.
Top comments (0)