Одним из ключевых аспектов JS является его объектно-ориентированная природа, которая основана на использовании прототипов. В этой статье мы рассмотрим основные концепции прототипов в JS и предоставим примеры, чтобы помочь вам лучше понять и использовать эту мощную функциональность.

Основы прототипов в JavaScript

Прототипы в JS основываются на концепции наследования. Каждый объект в JS имеет прототип, который является ссылкой на другой объект. Когда свойство или метод не найден в текущем объекте, интерпретатор JS будет искать его в прототипе этого объекта. Этот процесс может продолжаться вверх по цепочке прототипов до тех пор, пока не будет найдено нужное свойство или метод.

Реклама. ООО «ЯНДЕКС». ИНН: 7736207543
Освойте фронтенд-разработку за 10 месяцев: сделаете 9–13 проектов, пройдёте модули по алгоритмам, JavaScript, TypeScript, React, Redux. Попрактикуетесь в командных кейсах и реальных заказах. Получите диплом о переподготовке и карьерную поддержку до 7 месяцев после выпуска.

Прототипы можно использовать для создания наследования между объектами. Когда объект наследует свойства и методы от прототипа, он может использовать их как свои собственные. Это позволяет создавать иерархии объектов, где один объект может наследовать функциональность от другого объекта и добавлять свои собственные уникальные свойства и методы.

Создание прототипов в JavaScript

В JavaScript прототипы можно создавать с помощью конструкторов или литералов объектов. Рассмотрим оба подхода.

Создание прототипов с помощью конструкторов

Функции-конструкторы в JavaScript используются для создания объектов с одним и тем же набором свойств и методов. Когда функция-конструктор вызывается с использованием оператора new, создается новый объект, и его прототип автоматически устанавливается на функцию-конструктор.

📢 Подписывайтесь на наш Telegram-канал.

Там вы найдете анонсы обучающих статей и видео, готовый код для ваших проектов и увлекательные курсы. Ничего лишнего — только практика, вдохновение и развитие.

👉 https://t.me/codelab_channel

Вот пример использования прототипов для расчета электрической мощности и стоимости потребления энергии.

function ElectricAppliance(name, power) {
  this.name = name;
  this.power = power;
}

ElectricAppliance.prototype.calculateEnergyConsumption = function(hours) {
  const energyConsumption = this.power * hours;
  return energyConsumption;
};

ElectricAppliance.prototype.calculateCost = function(hours, rate) {
  const energyConsumption = this.calculateEnergyConsumption(hours);
  const cost = energyConsumption * rate;
  return cost;
};

const laptop = new ElectricAppliance('Ноутбук', 50);
const laptopHours = 3;
const electricityRate = 0.12; // Стоимость электроэнергии за 1 кВт·ч

const laptopEnergyConsumption = laptop.calculateEnergyConsumption(laptopHours);
console.log('Потребление энергии ноутбука за ' + laptopHours + ' часа(ов): ' + laptopEnergyConsumption + ' кВт·ч');

const laptopCost = laptop.calculateCost(laptopHours, electricityRate);
console.log('Стоимость потребления энергии ноутбука за ' + laptopHours + ' часа(ов): $' + laptopCost);

Создание прототипов с помощью литералов объектов

Литералы объектов предоставляют другой способ создания прототипов в JS. Вместо использования функций-конструкторов вы можете создать объект напрямую и явно установить его прототип с помощью метода Object.create().

Пример создания прототипа для работы с книгами и их характеристиками.

const bookPrototype = {
  getInfo: function() {
    return this.title + ' - ' + this.author;
  },
  read: function() {
    console.log('Читаем книгу: ' + this.title);
  }
};

const book1 = Object.create(bookPrototype);
book1.title = 'Алиса в Стране Чудес';
book1.author = 'Льюис Кэрролл';

const book2 = Object.create(bookPrototype);
book2.title = '1984';
book2.author = 'Джордж Оруэлл';

console.log(book1.getInfo()); // Выводит: "Алиса в Стране Чудес - Льюис Кэрролл"
book1.read(); // Выводит: "Читаем книгу: Алиса в Стране Чудес"

console.log(book2.getInfo()); // Выводит: "1984 - Джордж Оруэлл"
book2.read(); // Выводит: "Читаем книгу: 1984"

Зачем использовать прототипы

Прототипы в JavaScript являются основой для реализации объектно-ориентированного программирования в языке. Хотя в более новых версиях JavaScript появилась поддержка классов, они на самом деле являются синтаксическим сахаром поверх прототипов.

Вот несколько причин, почему прототипы по-прежнему имеют значение в JavaScript:

  1. Гибкость: Прототипы позволяют создавать объекты и наследовать функциональность без явного определения классов. Это дает большую гибкость в создании объектов и иерархий наследования.
  2. Динамическое расширение: Прототипы позволяют добавлять и изменять свойства и методы объектов на лету. Вы можете изменять прототипы во время выполнения программы, что полезно для динамического изменения поведения объектов.
  3. Экономия ресурсов: В JavaScript каждый объект имеет связь с прототипом, вместо того, чтобы создавать отдельную копию методов для каждого объекта. Это экономит ресурсы памяти и упрощает модификацию общего кода.
  4. Полиморфизм: Прототипы позволяют создавать иерархии объектов, где каждый объект может иметь свои собственные свойства и методы, переопределяющие или дополняющие функциональность родительских объектов. Это обеспечивает полиморфизм и гибкость в работе с объектами разных типов.
  5. Унаследованное поведение: Прототипы позволяют объектам наследовать функциональность от других объектов. Это способствует повторному использованию кода и созданию иерархии объектов с общими характеристиками.

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

Комментарии

0

Без регистрации и смс