JavaScript спроектовано на основі простої парадигми. В основі концепції є прості об'єкти. Об'єкт - це набір властивостей, і кожна властивість складається з імені та значення, асоційованого з цим ім'ям. Значення якості може бути функція, яку можна назвати методом об'єкта. На додаток до об'єктів, вбудованих у браузер, ви можете визначити свої власні об'єкти.
JavaScript об'єкт має властивості, асоційовані з ним. Властивість об'єкта можна розуміти як
змінну, закріплену за об'єктом. Властивості об'єкта по суті є тими самими
змінними JavaScript, за винятком, що вони закріплені за об'єктом. Властивості об'єкту
визначають його властивості. Отримати доступ до властивості об'єкта можна за допомогою точкового запису:
objectName.propertyName
Метод - це функція, асоційована з об'єктом або, простіше кажучи, метод - це властивість об'єкта, що є функцією. Методи визначаються так само, як і звичайні функції, за тим винятком, що вони надаються властивості об'єкта: objectName.methodname = function_name;
Потім ви можете викликати метод у контексті об'єкта таким чином: object.methodname(params);
Прототипи - це механізм, який основний вплив на те, як працюють об'єкти в JavaScript. Самі вони безпосередньо в коді використовуються рідко (і зазвичай тільки в бібліотеках), але їхнє знання важливе для розуміння поведінки коду та налагодження
У JavaScript об'єкти мають спеціальну приховану властивість [[Prototype]] (так воно названо у специфікації), яке або дорівнює null, або посилається на інший об'єкт. Цей об'єкт називається "прототип"
На відміну від мов, де реалізована клас-об'єктна парадигма, нам не потрібно створювати спочатку клас, щоб потім створити об'єкт класу. Ми можемо одразу створити об'єкт.
У нас тепер є можливість створювати об'єкти за деяким зразком. Кожен створений нами об'єкт і всі його властивості та методи займають окреме місце у пам'яті, хоча багато в чому вони повторюються. Якщо ми хочемо зберегти зв'язок між батьком і дитиною, і мати можливість міняти всі дочірні об'єкти разом – на допомогу нам прийде прототип.
const date = new Date();// Ця функція отримує прототип не з конструктора, а з об'єкта!
Object.getPrototypeOf(date); // Date {}
Прототипи є й у конструкторів, які ми визначаємо самі
function Company(name) { this.name = name;}
const company = new Company();
Object.getPrototypeOf(company); // Company {}
Як у кожної дитини є батько і мати, також вони є і у кожного об'єкта JavaScript. І якщо батько є конструктором, то мати — це якраз прототип. Подивимося, як це відбувається:
На сторінці три персонажі: кіт, пес і курка.Клацанням по картинці отримуємо інформацію про відповідну тварину(кличка, як виявляється, для курки-скільки яєць знесла).
Бачачи ключове слово function, інтерпретатор перевіряє код праворуч від нього, і т.к. все ок – створює новий об'єкт у пам'яті, який є нашою функцією.
Потім автоматично (без участі програміста) для цієї функції створюється властивість prototype, що посилається на порожній об'єкт.
Тім, даному об'єкту (на який вказує властивість prototype) також автоматично додається властивість конструктора, що вказує назад на функцію. Виходить таке циклічне посилання.
Тепер цей об'єкт можна описати як {constructor: …тут посилання на функцію…} – і є прототип функції.
Тепер крім того, що описано в прикладі, додатково в об'єкті animal створюється приховане властивість [[Prototype]], яке вказує на той же об'єкт, що і Hen.prototype. Т.к. властивість прихована, ми можемо ні переглянути його значення, ні змінити його – проте вона відіграє у подальшій роботі.
JavaScript не має "методів" у сенсі, прийнятому в класичній моделі ООП. У JavaScript будь-яка функція може бути додана до об'єкта як його властивості. Успадкована функція поводиться так само, як будь-яка інша властивість об'єкта.
Прототип це як реальне життя прототип. Свого роду креслення, яким ти щось створюєш. Намалював одне креслення Літак (Літак.прототип), потім побудував його (літак = новий Літак). Далі ти можеш, наприклад, пофарбувати цей готовий літак (літак. фарбування = зелений), але креслення у тебе залишиться не зворушеним і всі наступні створені літаки не будуть зеленими, а точніше взагалі не будуть пофарбованими. І ти вирішуєш більше не тупити і змінити креслення (Літак. прототип. фарбування = "будь-який колір").
Тепер сам факт фарбування входить у креслення, а колір задається в конструкторі при створенні нового літака (літак = новий Літак ("зелений")). Тепер усі літаки фарбуються у потрібний колір. Можна колір забити прямо в прототип (Літак. прототип. фарбування = "зелений" , щоб літаки були зеленими завжди (літак = новий Літак, де літак.фарбування і буде рівно "зелений")).
Вбудовані прототипи, JavaScript використовується успадкування на прототипах для вбудованих об'єктів. Наприклад Date.prototype.[[Prototype]] це Object.prototype, тому дати мають універсальні методи об'єкта.
Самостійно виконайте завдання для закріплення матеріалу