CodeGym /Kursy /Frontend SELF PL /Dziedziczenie klas

Dziedziczenie klas

Frontend SELF PL
Poziom 40 , Lekcja 0
Dostępny

7.1 Podstawy dziedziczenia

Dziedziczenie klas w JavaScript umożliwia tworzenie nowych klas na podstawie już istniejących, pozwalając na ponowne użycie i rozszerzenie ich funkcjonalności. To kluczowy aspekt programowania obiektowego (OOP), który umożliwia tworzenie hierarchii klas i zarządzanie zachowaniem obiektów.

Do dziedziczenia klas używa się słowa kluczowego extends. Klasa, która dziedziczy po innej klasie, nazywana jest klasą potomną (subclass), a klasa, po której się dziedziczy, nazywana jest klasą bazową (superclass).

Przykład:

JavaScript
    
      class Animal {
        constructor(name) {
          this.name = name;
        }

        speak() {
          console.log(`${this.name} makes a noise.`);
        }
      }

      class Dog extends Animal {
        speak() {
          console.log(`${this.name} barks.`);
        }
      }

      const dog = new Dog('Rex');
      dog.speak(); // "Rex barks."
    
  

Wyjaśnienie:

  • Klasa Animal jest klasą bazową z konstruktorem i metodą speak()
  • Klasa Dog dziedziczy po Animal i nadpisuje metodę speak()
  • Instancja dog klasy Dog korzysta z nadpisanej metody speak()

7.2 Słowo kluczowe super

Słowo kluczowe super służy do wywoływania konstruktora lub metod klasy bazowej z klasy potomnej.

1. Wywołanie konstruktora klasy bazowej

Klasa potomna musi wywołać konstruktor klasy bazowej za pomocą super() przed użyciem this.

Przykład:

Konstruktor Dog wywołuje super(name), aby zainicjować właściwość name klasy bazowej Animal.

JavaScript
    
      class Animal {
        constructor(name) {
          this.name = name;
        }

        speak() {
          console.log(`${this.name} makes a noise.`);
        }
      }

      class Dog extends Animal {
        constructor(name, breed) {
          super(name);
          this.breed = breed;
        }

        speak() {
          console.log(`${this.name} barks.`);
        }
      }

      const dog = new Dog('Rex', 'Labrador');
      console.log(dog.name); // "Rex"
      console.log(dog.breed); // "Labrador"
      dog.speak(); // "Rex barks."
    
  

2. Wywołanie metod klasy bazowej

Metody klasy bazowej mogą być wywoływane z klasy potomnej za pomocą super.

Przykład:

Metoda speak() klasy Dog wywołuje metodę speak() klasy bazowej Animal przy użyciu super.speak(), a następnie wykonuje własną logikę.

JavaScript
    
      class Animal {
        constructor(name) {
          this.name = name;
        }

        speak() {
          console.log(`${this.name} makes a noise.`);
        }
      }

      class Dog extends Animal {
        speak() {
          super.speak(); // Wywołanie metody klasy bazowej
          console.log(`${this.name} barks.`);
        }
      }

      const dog = new Dog('Rex');
      dog.speak();

      // "Rex makes a noise."
      // "Rex barks."
    
  

7.3 Dziedziczenie i nadpisywanie metod

Dziedziczenie pozwala klasom potomnym nadpisywać metody klasy bazowej. To umożliwia zmienianie lub rozszerzanie funkcjonalności metod.

Przykład:

Metoda speak() klasy Dog nadpisuje metodę speak() klasy bazowej Animal, dostarczając własną implementację.

JavaScript
    
      class Animal {
        constructor(name) {
          this.name = name;
        }

        speak() {
          console.log(`${this.name} makes a noise.`);
        }
      }

      class Dog extends Animal {
        speak() {
          console.log(`${this.name} barks.`);
        }
      }

      const animal = new Animal('Generic Animal');
      animal.speak(); // "Generic Animal makes a noise."

      const dog = new Dog('Rex');
      dog.speak(); // "Rex barks."
    
  

7.4 Dziedziczenie i dodatkowe metody

Klasa potomna może dodawać nowe metody, które nie istnieją w klasie bazowej.

Przykład:

Klasa Dog dodaje nową metodę fetch(), która nie istnieje w klasie bazowej Animal.

JavaScript
    
      class Animal {
        constructor(name) {
          this.name = name;
        }

        speak() {
          console.log(`${this.name} makes a noise.`);
        }
      }

      class Dog extends Animal {
        speak() {
          console.log(`${this.name} barks.`);
        }

        fetch() {
          console.log(`${this.name} is fetching.`);
        }
      }

      const dog = new Dog('Rex');
      dog.speak(); // "Rex barks."
      dog.fetch(); // "Rex is fetching."
    
  

7.5 Sprawdzanie dziedziczenia

Aby sprawdzić dziedziczenie, można użyć operatora instanceof i metody isPrototypeOf().

Przykład:

Operator instanceof sprawdza, czy obiekt jest instancją klasy. Metoda isPrototypeOf() sprawdza, czy prototyp obiektu jest częścią łańcucha prototypów innego obiektu.

JavaScript
    
      console.log(dog instanceof Dog); // true
      console.log(dog instanceof Animal); // true
      console.log(Animal.prototype.isPrototypeOf(Dog.prototype)); // true
    
  
Komentarze
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION