❓❓❓
Что такое наследование❓❓❓
При создании нового объекта (класса), как в программировании, так и наяву, мы можем пойти двумя путями:
- Создать экземпляр с нуля.
- Использовать уже существующий объект и довести его до нужного нам состояния.
Второй путь намного лучше, проще и требует меньших усилий. Представим, что перед нами стоит задача запрограммировать класс дерева. Наше дерево имеет следующие атрибуты: вид, возраст и высоту. Также дерево обладает способностью расти (при этом будет увеличиваться его высота и возраст) и способностью выводить информацию о себе.
class Tree {
constructor(kind, height) {
this.kind = kind
this.age = 0
this.height = height
}
info() {
// Метод вывода информации о дереве
console.log("%s years old %s. %s meters high.", this.age, this.kind, this.height)
}
grow() {
// Метод роста
this.age += 1
this.height += 0.5
}
}
// Для проверки создадим экземпляр класса «дерево» и немного поиграем с ним.
const tree1 = new Tree("oak", 0.5)
tree1.info()
tree1.grow()
tree1.info()
Теперь представим, что наша задача усложняется — нам нужно добавить класс фруктового дерева, у которого будут те же атрибуты и методы, но в дополнение появится метод сбора урожая фруктов. Конечно, мы можем создать с нуля класс
FruitTree и переписать заново весь код, который будет совпадать с тем, что мы уже написали, однако нарушится принцип DRY (Don't Repeat Yourself — «не повторяйся»).
Наследование позволяет создать класс
FruitTree и указать ему в качестве родителя класс
Tree. Таким образом,
FruitTree получит доступ ко всем атрибутам и методам, которыми обладает класс
Tree.
class Tree {
constructor(kind, height) {
this.kind = kind
this.age = 0
this.height = height
}
info() {
// Метод вывода информации о дереве
console.log("%s years old %s. %s meters high.", this.age, this.kind, this.height)
}
grow() {
// Метод роста
this.age += 1
this.height += 0.5
}
}
class FruitTree extends Tree {
constructor(kind, height) {
// Если необходимо вызвать метод инициализации родителя,
// то в JavaScript это делается при помощи функции super()
super(kind, height)
}
giveFruits() {
console.log("Collected 20kg of %ss", this.kind)
}
}
// Для проверки создадим экземпляр класса «дерево» и немного поиграем с ним.
const tree1 = new Tree("oak",0.5)
tree1.info()
tree1.grow()
tree1.info()
// Создадим экземпляр класса FruitTree:
const tree2 = new FruitTree("apple",0.7)
// у нас есть доступ к методам родителя
tree2.info()
tree2.grow()
// Мы можем использовать свой метод
tree2.giveFruits()
// А для родительского экземпляра метод giveFruits() недоступен
tree1.giveFruits() // Вызовет ошибку
Наследование в JavaScript позволяет сократить время разработки, упростить процесс написания программы как сейчас, так и в будущем. Правильно спроектированный класс — кроме прочего, гибкая структура, которую вы свободно сможете изменять, дополнять в будущем. Важно понимать, что проще создать дополнительный базовый класс, наследовать от него и расширять по мере необходимости, чем сразу написать готовый класс. В JavaScript имеется множество классов, которые можно использовать за основу. Многие встроенные объекты и API браузера активно используют
наследование.
❓❓❓
Где можно посмотреть, какие классы наследуют от других классов❓❓❓
Я написал маленькую программу, которая стоит граф зависимостей в наследовании классов, которые есть в браузере.
<body style="margin: 0;">
<iframe style="width: 100%; height: 100%; border: none;" src="https://charm-launch.glitch.me/inspector/?class=Object">
Вы можете открыть эту программу в отдельной вкладке и если не можете найти нужный класс, то можно воспользоваться встроенным поиском (Ctrl+F) или дописать в адресной строке браузера параметр class, например...
https://charm-launch.glitch.me/inspe...ass=ShadowRoot
https://charm-launch.glitch.me/inspe...s=AnalyserNode
Перемещаться можно при помощи стрелок на клавиатуре или перетаскиванием при помощи мыши или пальцем на сенсорном экране. Работает в последних версиях Chrome и Firefox (было проверено в них, но должно работать везде, где поддерживаются стандарты)
При нажатии на имя класса, в новой вкладке открывается статья об классе от MDN, но у них есть документация не о всех классах.