Javascript-форум (https://javascript.ru/forum/)
-   Ваши сайты и скрипты (https://javascript.ru/forum/project/)
-   -   ❗Наследование в JavaScript (⛓встроенные объекты и ⚙ API браузера) (https://javascript.ru/forum/project/78803-%E2%9D%97nasledovanie-v-javascript-%E2%9B%93vstroennye-obekty-i-%E2%9A%99-api-brauzera.html)

Malleys 07.11.2019 11:45

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

рони 07.11.2019 11:57

Malleys,
:thanks:

laimas 07.11.2019 12:58

Malleys, нормально, но если убрать красоту, чтобы было более компактней и удобней?


Часовой пояс GMT +3, время: 16:00.