Вивчайте Розуміння наслідування з extends та super() | Володіння Класами Та Наслідуванням У JavaScript

Що таке наслідування класів?

JavaScript використовує ключове слово extends для встановлення цього зв'язку між класами. Дочірній клас може додавати власні властивості та методи або перевизначати ті, що успадковані від батьківського класу.

Уявіть дочірній клас як спеціалізовану версію батьківського класу. Якщо батьківський клас — це креслення автомобіля, то дочірній клас може представляти певний тип автомобіля, наприклад, електромобіль. Електромобіль успадковує базову функціональність (колеса, кермо), але може додавати або змінювати функції (акумулятор, система зарядки).

Як використовувати ключове слово extends

Ключове слово extends використовується для того, щоб один клас наслідував інший. Дочірній клас успадковує всі властивості та методи батьківського класу.


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

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

// Child class extending the Animal class
class Dog extends Animal {
  bark() {
    console.log(`${this.name} barks!`);
  }
}

const dog = new Dog('Rex');
dog.makeSound(); // Output: Rex makes a sound.
dog.bark(); // Output: Rex barks!

У цьому прикладі клас Dog розширює клас Animal, успадковуючи метод makeSound() від батьківського класу. Клас Dog також додає власний метод bark().

Робота з конструктором у дочірньому класі

Під час створення дочірнього класу часто виникає необхідність ініціалізувати як власні властивості, так і властивості батьківського класу. Це здійснюється за допомогою методу constructor. Однак, щоб переконатися, що батьківський клас ініціалізовано правильно, потрібно використовувати функцію super() для виклику конструктора батьківського класу.

Важливо: Якщо у дочірнього класу є конструктор, він повинен викликати super() до звернення до this, інакше виникне помилка.

Використання super() для виклику конструктора батьківського класу

Функція super() використовується для виклику конструктора батьківського класу з конструктора дочірнього класу. Це гарантує, що всі властивості або логіка, визначені у конструкторі батьківського класу, будуть коректно ініціалізовані перед додаванням нової функціональності у дочірньому класі.


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

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

// Child class with its own constructor
class Dog extends Animal {
  constructor(name, breed) {
    // Call the parent class constructor using super()
    super(name);
    this.breed = breed;
  }

  bark() {
    console.log(`${this.name}, the ${this.breed}, barks!`);
  }
}

const dog = new Dog('Rex', 'German Shepherd');
dog.makeSound(); // Output: Rex makes a sound.
dog.bark(); // Output: Rex, the German Shepherd, barks!

У цьому прикладі представлено базовий клас Animal з конструктором, який ініціалізує властивість name, та методом makeSound, що виводить загальне повідомлення про звук. Клас Dog наслідує Animal, додаючи власний конструктор, який приймає аргументи name та breed. Усередині конструктора Dog функція super() викликає конструктор батьківського класу, забезпечуючи правильне встановлення name. Додатково, Dog містить новий метод bark, який виводить повідомлення, специфічне для породи собаки. Створюючи новий екземпляр Dog з ім'ям Rex породи German Shepherd, можна викликати як makeSound, так і bark, демонструючи успадковану та нову поведінку.

Основні моменти при використанні extends та super()

Успадкування: Ключове слово extends дозволяє дочірньому класу успадковувати властивості та методи батьківського класу.

Конструктор у дочірньому класі: При визначенні конструктора у дочірньому класі завжди використовуйте super() для виклику конструктора батьківського класу.

Доступ до this: Необхідно викликати super() перед доступом до this у конструкторі дочірнього класу.

Перевизначення методів: Можна перевизначати методи батьківського класу у дочірньому класі, визначивши метод з такою ж назвою. Також можна використовувати super.methodName() для виклику методу батьківського класу з дочірнього класу за потреби.

Приклад: Перевизначення методів і використання super()

Іноді виникає потреба перевизначити метод із батьківського класу в дочірньому класі, але при цьому викликати метод батьківського класу як частину нової логіки. Це можна зробити за допомогою super.methodName().


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

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

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

  // Override the makeSound method
  makeSound() {
    // Call the parent class's makeSound method
    super.makeSound();
    console.log(`${this.name}, the ${this.breed}, barks loudly.`);
  }
}

const dog = new Dog('Rex', 'German Shepherd');
dog.makeSound();
// Output:
// Rex makes a generic sound.
// Rex, the German Shepherd, barks loudly.

У цьому прикладі клас Dog перевизначає метод makeSound, але все одно викликає метод makeSound батьківського класу за допомогою super.makeSound(). Це дозволяє дочірньому класу розширювати поведінку батьківського класу, не замінюючи її повністю.

Приклад із реального світу: класи Employee та Manager

Розглянемо ситуацію, коли маємо клас Employee та клас Manager, який його наслідує. Клас Manager додає нову функціональність до базової функціональності класу Employee.


              12345678910111213141516171819202122232425262728
            
class Employee {
  constructor(name, position) {
    this.name = name;
    this.position = position;
  }

  getDetails() {
    return `${this.name} works as a ${this.position}.`;
  }
}

class Manager extends Employee {
  constructor(name, position, department) {
    // Call the parent class constructor using super()
    super(name, position);
    this.department = department;
  }

  getDetails() {
    return `${super.getDetails()} They manage the ${
      this.department
    } department.`;
  }
}

const manager = new Manager('Alice', 'Manager', 'Sales');
console.log(manager.getDetails());
// Output: Alice works as a Manager. They manage the Sales department.

У цьому прикладі клас Manager наслідує клас Employee, додаючи нову властивість department. Метод getDetails() у класі Manager викликає метод батьківського класу за допомогою super.getDetails(), а потім додає власну інформацію, пов'язану з відділом.

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 1. Розділ 14

Запитати АІ

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Awesome!

Completion rate improved to 2.22

Свайпніть щоб показати меню

Що таке наслідування класів?

Як використовувати ключове слово extends


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

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

// Child class extending the Animal class
class Dog extends Animal {
  bark() {
    console.log(`${this.name} barks!`);
  }
}

const dog = new Dog('Rex');
dog.makeSound(); // Output: Rex makes a sound.
dog.bark(); // Output: Rex barks!

Робота з конструктором у дочірньому класі

Використання super() для виклику конструктора батьківського класу


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

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

// Child class with its own constructor
class Dog extends Animal {
  constructor(name, breed) {
    // Call the parent class constructor using super()
    super(name);
    this.breed = breed;
  }

  bark() {
    console.log(`${this.name}, the ${this.breed}, barks!`);
  }
}

const dog = new Dog('Rex', 'German Shepherd');
dog.makeSound(); // Output: Rex makes a sound.
dog.bark(); // Output: Rex, the German Shepherd, barks!

Основні моменти при використанні extends та super()

Доступ до this: Необхідно викликати super() перед доступом до this у конструкторі дочірнього класу.

Приклад: Перевизначення методів і використання super()


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

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

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

  // Override the makeSound method
  makeSound() {
    // Call the parent class's makeSound method
    super.makeSound();
    console.log(`${this.name}, the ${this.breed}, barks loudly.`);
  }
}

const dog = new Dog('Rex', 'German Shepherd');
dog.makeSound();
// Output:
// Rex makes a generic sound.
// Rex, the German Shepherd, barks loudly.

Приклад із реального світу: класи Employee та Manager


              12345678910111213141516171819202122232425262728
            
class Employee {
  constructor(name, position) {
    this.name = name;
    this.position = position;
  }

  getDetails() {
    return `${this.name} works as a ${this.position}.`;
  }
}

class Manager extends Employee {
  constructor(name, position, department) {
    // Call the parent class constructor using super()
    super(name, position);
    this.department = department;
  }

  getDetails() {
    return `${super.getDetails()} They manage the ${
      this.department
    } department.`;
  }
}

const manager = new Manager('Alice', 'Manager', 'Sales');
console.log(manager.getDetails());
// Output: Alice works as a Manager. They manage the Sales department.

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 1. Розділ 14

Розуміння наслідування з extends та super()

Що таке наслідування класів?

Як використовувати ключове слово extends

Робота з конструктором у дочірньому класі

Використання super() для виклику конструктора батьківського класу

Основні моменти при використанні extends та super()

Приклад: Перевизначення методів і використання super()

Приклад із реального світу: класи Employee та Manager

1. Що робить ключове слово `extends`?

2. Чому в конструкторі дочірнього класу використовується `super()`?

3. Який буде результат виконання наступного коду?

Awesome!

Розуміння наслідування з extends та super()

Що таке наслідування класів?

Як використовувати ключове слово extends

Робота з конструктором у дочірньому класі

Використання super() для виклику конструктора батьківського класу

Основні моменти при використанні extends та super()

Приклад: Перевизначення методів і використання super()

Приклад із реального світу: класи Employee та Manager

1. Що робить ключове слово `extends`?

2. Чому в конструкторі дочірнього класу використовується `super()`?

3. Який буде результат виконання наступного коду?

Розуміння наслідування з extends та super()

Що таке наслідування класів?

Як використовувати ключове слово extends

Робота з конструктором у дочірньому класі

Використання super() для виклику конструктора батьківського класу

Основні моменти при використанні extends та super()

Приклад: Перевизначення методів і використання super()

Приклад із реального світу: класи Employee та Manager

1. Що робить ключове слово extends?

2. Чому в конструкторі дочірнього класу використовується super()?

3. Який буде результат виконання наступного коду?

Awesome!

Розуміння наслідування з extends та super()

Що таке наслідування класів?

Як використовувати ключове слово extends

Робота з конструктором у дочірньому класі

Використання super() для виклику конструктора батьківського класу

Основні моменти при використанні extends та super()

Приклад: Перевизначення методів і використання super()

Приклад із реального світу: класи Employee та Manager

1. Що робить ключове слово extends?

2. Чому в конструкторі дочірнього класу використовується super()?

3. Який буде результат виконання наступного коду?

1. Що робить ключове слово `extends`?

2. Чому в конструкторі дочірнього класу використовується `super()`?

1. Що робить ключове слово `extends`?

2. Чому в конструкторі дочірнього класу використовується `super()`?