В этой части вы прочитаете как работает в JavaScript наследование классов, постараюсь объяснить всё максимально понятно и просто.
Что такое наследование:
Перед тем как объяснить как это работает на языке программирования JavaScript, нужно рассказать что это вообще такое.
Если кратко говоря, то это возможность при создание нового класса, унаследовать свойства и методы другого класса, это очень активно приминается в паттерном проектирование.
То есть суть в том, что у вас есть к примеру класс машины, которая имеет ряд свойств и методов, и мы создаём ещё один класс грузовик, в котором добавляем свойства груза и методы для работы с ним.
Наследование JS:
Наследование в JavaScript похоже как и в других языках программирования, и делается оно через ключевое слово extends
, но сначала сделаем базовый класс.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | "use strict"; // Создаём класс Car class Car { // Создаём конструктор класса constructor(brand, speed, weight) { this.brand = brand; // Марка машины this.speed = speed; // Скорость машины this.weight = weight; // Размер машины } // Метод показа параметров машины showMarka() { // Вывод сообщения alert("Марка: " + this.brend + "; Скорость: " + this.speed + "км/ч; Вес: " + this.weight + "кг;"); } } |
То есть мы создали базовый класс Car, с базовыми параметрами, марка, скорость и вес, давайте создадим класс грузовик, в котором добавим грузоподъемность и вывод этого параметра, вот код.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | // Создаём класс Truck class Truck extends Car { // Конструктор класса constructor(brand, speed, weight, carrying) { // Запуск конструктора родительского класса super(brand, speed, weight) // Назначаем грузоподъемность this.carrying = carrying; } // Вывод грузоподъемности showCarrying () { // Вывод сообщения alert("Грузоподъемность: " + this.carrying + "кг;"); } } // Создание объекта класса Truck let truck = new Truck("ВАЗ", 150, 3000, 10000) // Вывод основных параметров машины truck.showMarka(); // Вывод грузоподъемности truck.showCarrying(); |
В начала тут мы всё также создаём новый класс, но на этот раз будем наследовать через ключевое слово extends
, класс Car
, внутри конструктора мы вызываем super()
, это функция вызывает конструктор родительского класса и поэтому мы в качестве параметров вставляем все параметры которые используем в Car
, ниже уже идёт новое свойство carrying
, для грузоподъемности.
Дальше создаём метод для вывода этой грузоподъемности, тут не чего такое нет. Дальше, уже вне класса создаём объект этого класса, и сначала выводим основную информацию, а потом уже грузоподъемность.
Программа сначала должна вывести основные параметры, то есть те которые ещё есть в родительском классе и потом новый, вот что получается.
Как видите выводит всё правильно, но это не много не удобно, специально для такого вывода писать отдельный метод, можно дополнить родительский метод, делается это примерно так.
1 2 3 4 | showMarka() { super.showMarka() alert("Грузоподъемность: " + this.carrying + "кг;"); } |
Тут мы внутри вызываем в начале родительский метод showMarka()
, обращаясь ему через ключевое слово super
, чуть ниже дополняем и новым alert.
Должно получится всё тоже самое, как и в первый раз, только теперь не надо вызывать два метода.
Вывод:
В этой части учебника вы прочитали в JavaScript наследование классов, получилось не сильно много, но на мой взгляд это главное что нужно знать.