JavaScript - Наследование

Здравствуйте, будущие маги JavaScript! Сегодня мы отправляемся в увлекательное путешествие по магическому миру наследования в JavaScript. Не волнуйтесь, если вы новички в программировании; я буду вашим доброжелательным проводником, и мы шаг за шагом изучим это понятие. Так что возьмите свои виртуальные палочки (клавиатуры), и lets dive in!

JavaScript - Inheritance

Наследование в JavaScript

Наследование похоже на передачу семейных черт, но в мире программирования. Представьте, что вы создаете генеалогическое древо объектов, где дети наследуют свойства и методы от своих родителей. Круто, правда?

Давайте начнем с простого примера:

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

speak() {
console.log(`${this.name} издает звук.`);
}
}

class Dog extends Animal {
bark() {
console.log(`${this.name} лает: Гав гав!`);
}
}

const myDog = new Dog("Buddy");
myDog.speak(); // Вывод: Buddy издает звук.
myDog.bark();  // Вывод: Buddy лает: Гав гав!

В этом примере Dog наследует от Animal. Это означает, что Dog получает все свойства и методы Animal, плюс свой уникальный метод bark(). Это как если бы Buddy унаследовал способность говорить от всех животных, но также имел свою особую суперспособность лаять!

Одnoklassovoe наследование в JavaScript

Одноклассовое наследование occurs when a class inherits from just one parent class. It's like having one super cool parent you want to learn everything from.

Давайте рассмотрим другой пример:

class Vehicle {
constructor(brand) {
this.brand = brand;
}

start() {
console.log(`Запуск ${this.brand}.`);
}
}

class Car extends Vehicle {
honk() {
console.log(`${this.brand} машина издает сигнал: Бип бип!`);
}
}

const myCar = new Car("Toyota");
myCar.start(); // Вывод: Запуск Toyota.
myCar.honk();  // Вывод: Toyota машина издает сигнал: Бип бип!

Здесь Car наследует от Vehicle. Это как если бы ваша машина научилась запускаться от общего понятия транспортных средств, но также знала, как сигналить, потому что, ну, это машина!

Ключевое слово JavaScript super()

Теперь давайте поговорим о ключевом слове super(). Это какdeferential nod к вашим родителям, признание их вклада в вашу awesomeness.

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

class Dog extends Animal {
constructor(name, breed) {
super(name); // Вызов родительского конструктора
this.breed = breed;
}

introduce() {
console.log(`Я ${this.name}, собака породы ${this.breed}.`);
}
}

const myDog = new Dog("Max", "Лабрадор");
myDog.introduce(); // Вывод: Я Max, собака породы Лабрадор.

Вызов super(name) в конструкторе Dog как бы говорит: "Эй, родитель Animal, можешь ли ты заняться установкой имени для меня?" Это способ повторного использования логики конструктора родителя.

Многоуровневое наследование в JavaScript

Многоуровневое наследование похоже на генеалогическое древо с несколькими поколениями. Давайте рассмотрим пример:

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

eat() {
console.log(`${this.name} ест.`);
}
}

class Dog extends Animal {
bark() {
console.log(`${this.name} говорит: Гав!`);
}
}

class Labrador extends Dog {
swim() {
console.log(`${this.name} плавает.`);
}
}

const myDog = new Labrador("Charlie");
myDog.eat();  // Вывод: Charlie ест.
myDog.bark(); // Вывод: Charlie говорит: Гав!
myDog.swim(); // Вывод: Charlie плавает.

Здесь Labrador наследует от Dog, который наследует от Animal. Это как если бы Charlie the Labrador научился есть от всех животных, лаять от собак, и имел свою особую способность плавать.

Иерархическое наследование в JavaScript

Иерархическое наследование occurs when multiple classes inherit from a single parent class. It's like siblings inheriting traits from the same parent.

class Vehicle {
constructor(brand) {
this.brand = brand;
}

start() {
console.log(`Запуск ${this.brand}.`);
}
}

class Car extends Vehicle {
drive() {
console.log(`Вождение ${this.brand} машины.`);
}
}

class Motorcycle extends Vehicle {
wheelie() {
console.log(`Делает wheelie на ${this.brand} мотоцикле!`);
}
}

const myCar = new Car("Toyota");
const myBike = new Motorcycle("Harley");

myCar.start();    // Вывод: Запуск Toyota.
myCar.drive();    // Вывод: Вождение Toyota машины.

myBike.start();   // Вывод: Запуск Harley.
myBike.wheelie(); // Вывод: Делает wheelie на Harley мотоцикле!

Оба Car и Motorcycle наследуют от Vehicle, но у них есть свои уникальные методы.

Наследование статических членов класса

Статические члены принадлежат классу, а не его экземплярам. Но их можно наследовать! Давайте посмотрим, как:

class MathOperations {
static PI = 3.14159;

static calculateCircleArea(radius) {
return this.PI * radius * radius;
}
}

class AdvancedMath extends MathOperations {
static calculateSphereVolume(radius) {
return (4/3) * this.PI * radius * radius * radius;
}
}

console.log(AdvancedMath.PI); // Вывод: 3.14159
console.log(AdvancedMath.calculateCircleArea(5)); // Вывод: 78.53975
console.log(AdvancedMath.calculateSphereVolume(3)); // Вывод: 113.09733

Здесь AdvancedMath наследует статическое свойство PI и метод calculateCircleArea от MathOperations.

Основанное на прототипе наследование в JavaScript

До ES6 классов, JavaScript использовал наследование, основанное на прототипах. Это немного сложнее, но все же важно понять:

function Animal(name) {
this.name = name;
}

Animal.prototype.speak = function() {
console.log(`${this.name} издает звук.`);
};

function Dog(name) {
Animal.call(this, name);
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.bark = function() {
console.log(`${this.name} лает: Гав гав!`);
};

const myDog = new Dog("Rex");
myDog.speak(); // Вывод: Rex издает звук.
myDog.bark();  // Вывод: Rex лает: Гав гав!

Это достигает того же результата, что и наш первый пример классов, но используя старый синтаксис прототипов.

Преимущества наследования

Наследование в JavaScript предлагает несколько преимуществ:

Повторное использование кода
Расширяемость
Легкость поддержки
Полиморфизм

Вот таблица, резюмирующая эти преимущества:

Преимущество	Описание
Повторное использование кода	Наследование свойств и методов от родительских классов, уменьшая дублирование
Расширяемость	Легко добавлять новые функции к существующим классам
Легкость поддержки	Изменения в родительских классах автоматически отражаются в дочерних классах
Полиморфизм	Использование объектов разных классов через один и тот же интерфейс

помните, с большой силой приходит большая ответственность. Используйте наследование wisely, и ваш код будет вам благодарен!

И вот оно,folks! Мы прошли через землю наследования JavaScript. Надеюсь, это руководство осветило ваш путь. Продолжайте практиковаться, будьте любопытны, и счастливого кодирования!

Credits: Image by storyset

Предыдущий учебник:

JavaScript - Инкапсуляция

Следующий учебник:

JavaScript - Абстракция