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

читал о конструкторах в функциях:
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)Можете ли вы написать здесь как выглядел бы код сначала без конструктора и затем с прототипом на каком-то маленьком примере из сайта? Или пример который мог бы быть реализован на каком сайте.