Javascript-форум - ❗Наследование в JavaScript (⛓встроенные объекты и ⚙ API браузера)

❓❓❓Что такое наследование❓❓❓
При создании нового объекта (класса), как в программировании, так и наяву, мы можем пойти двумя путями:

Создать экземпляр с нуля.
Использовать уже существующий объект и довести его до нужного нам состояния.

Второй путь намного лучше, проще и требует меньших усилий. Представим, что перед нами стоит задача запрограммировать класс дерева. Наше дерево имеет следующие атрибуты: вид, возраст и высоту. Также дерево обладает способностью расти (при этом будет увеличиваться его высота и возраст) и способностью выводить информацию о себе.

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, но у них есть документация не о всех классах.