Введение

Добро пожаловать в симфонию программирования на JavaScript! Сегодня мы собираемся изучить важную концепцию JavaScript, называемую прототипами. Однако вместо того, чтобы использовать обыденные примеры, мы будем учиться с помощью музыки. Итак, давайте брать правильные ноты и настраиваться на ритм прототипов!

Что такое прототип в JavaScript?

В JavaScript почти все является объектом, и эти объекты связаны друг с другом в то, что мы называем «цепочкой прототипов». Прототип — это, по сути, «родительский» объект, от которого другие объекты наследуют свойства и методы.

Этот механизм является краеугольным камнем объектно-ориентированного программирования (ООП) JavaScript, позволяя объектам совместно использовать методы, что приводит к лучшему использованию памяти и организованной структуре.

Мелодия прототипов: музыкальный пример

Давайте представим, что мы пытаемся создать базовую структуру для музыкальной библиотеки. Мы начнем с определения функции-конструктора для «Песни».

function Song(title, artist, duration) {
  this.title = title;
  this.artist = artist;
  this.duration = duration;
}

В нашей музыкальной библиотеке у каждой песни есть название, исполнитель и продолжительность. Но чего-то не хватает — как насчет способности песни играть? Вместо добавления метода play непосредственно в конструктор (что означало бы, что каждый объект песни будет иметь свою собственную копию), мы можем добавить его в прототип Song:

Song.prototype.play = function() {
  console.log(`Playing: ${this.title} by ${this.artist}`);
}

Теперь каждая песня, которую мы создаем с помощью конструктора Song, будет иметь доступ к методу play:

let song1 = new Song("Bohemian Rhapsody", "Queen", "5:55");
song1.play(); // Logs: "Playing: Bohemian Rhapsody by Queen"

Дирижирование оркестром: сила прототипического наследования

Прототипы действительно сияют, когда мы говорим о наследовании. Представьте, что мы хотим добавить в нашу библиотеку особый тип песни: «LiveSong». Концертная песня обладает всеми свойствами обычной песни, но также имеет location место, где она исполнялась вживую.

Вот как мы можем создать конструктор LiveSong, который наследуется от Song:

function LiveSong(title, artist, duration, location) {
  Song.call(this, title, artist, duration);
  this.location = location;
}

LiveSong.prototype = Object.create(Song.prototype);
LiveSong.prototype.constructor = LiveSong;

Объекты LiveSong могут использовать метод play, но у них также есть уникальный метод where:

LiveSong.prototype.where = function() {
  console.log(`This song was played live in ${this.location}`);
}

let liveSong1 = new LiveSong("Hotel California (Live)", "Eagles", "7:12", "Washington");
liveSong1.play(); // Logs: "Playing: Hotel California (Live) by Eagles"
liveSong1.where(); // Logs: "This song was played live in Washington"

Ваша очередь: создание музыкального плейлиста

Задача: создать конструктор Playlist с массивом объектов Song. Этот Playlist должен иметь два метода:

  1. addSong(song): Добавляет песню в список воспроизведения.
  2. playAll(): Воспроизведение всех песен в списке воспроизведения в том порядке, в котором они были добавлены.

Подсказка: не забывайте использовать прототипы для методов!

Заключение

Подобно симфонии, язык JavaScript