Прототип (отдельно) и конструктор (отдельно) на реальных примерах из сайтов?

Question

[nathan111777]

читал о конструкторах в функциях:
function Animal(name) {
this.name = name;
this.canWalk = true;
}
var animal = new Animal("ёжик");

а также о прототипах:
Animal.prototype.draw =function () {
}

на этих ресурсах
learn.javascript.ru
developer.mozilla.org
Но до конца не понял как именно они уменьшают код и впринципе улучшают жизнь програмистам))Почему? Потому что лучше понимается на реальних примерах из сайтов а не на примерах animal или "васьках и петьках" всяких.Пример из моего личного опыта: хорошо засвоил циклы когда нужно было для 30 изображений прописать функцию но я вместо 30 функций передал одну функцию в цикл и уменьшил таким образом код, так я и понял всю суть цикла, а не просто заучил его анатомию. Вот бы и на этих ресурсах делали примеры из реальных проектов новички не задавали бы по 100 однотипных вопросов. Хотя с точки зрения терминологии это классные ресурсы

Поэтому у меня такие вопросы:
1)Можете ли вы написать здесь как выглядел бы код сначала без прототипа и затем с прототипом на каком-то маленьком примере из сайта? Или пример который мог бы быть реализован на каком сайте.
2)Можете ли вы написать здесь как выглядел бы код сначала без конструктора и затем с прототипом на каком-то маленьком примере из сайта? Или пример который мог бы быть реализован на каком сайте.

Comments

[Модератор]

https://toster.ru/help/rules
3.8

Answer 1

[Stalker_RED]

Что такое основы ООП?

Answer 2

[Антон Спирин]

Но до конца не понял как именно они уменьшают код

Прототип позволяет не создавать экземпляры одних и тех же методов и статических свойств для каждого экземпляра вашего класса. Создаем 10000 экземпляров Animal, а метод draw используем один для всех.

Тут еще важно почитать про принцип работы оператора new.

Вам, по-хорошему, надо взять любой учебник по JavaScript и хорошо его изучить от корки до корки.

Comments

[nathan111777]

Частично вы на один мой вопрос ответили хотя без примера но и на том спасибо, но главные тезисы моей созданной темы:
1) "пример небольшого кода с реального сайта"
2) "показать на примере разницу между конструктором и кодом без него || показать на примере разницу между прототипом и кодом без него".
Почему это важно для меня? Я пару месяцев назад прочитал книгу от "корки до корки" и тогда кое как понял.Пройшло несколько месяцев и за это время я сделал несколько сайтов на JS но ни разу не использовал ни конструктора ни прототипа хотя функционал хороший на моих сайтах. Сегодня наткнулся опять на прототипы и конструктиры на учебном сайте и теперь я уже не мог вспомнить что они делают. А если бы я когда-то на своем сайте или на примере другого сайта увидел как они улучшают код, то бы таких тем не создавал.

[Антон Спирин]

nathan111777, вряд ли сейчас кто-либо просто так использует конструкторы и прототипы на простых сайтах. А те кто использовал давно перешли на ES6 классы.

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

Разницу с конструктором и без него продемонстрировал на словах в ответе. Нет смысла описывать методы в конструкторе, так как создав 1000 экземпляров вы создадите 1000 копий каждого метода, если вынести методы в прототип, то они будут вызываться из него.

Весь JavaScirpt построен на прототипах. Создайте, например, массив и посмотрите в консоли его содержимое, откройте и посмотрите прототип(__proto__), затем прототип прототипа. Попробуйте сделать выводы.