Если говорить совсем просто объект в JS - это неупорядоченный набор свойств и методов, состоящий из пар "ключ-значение". Свойствами в данном случае выступают переменные, а методами - функции.
Рассмотрим конкретный пример:
А теперь попытаемся его "расшифровать")
Перед нами автомобиль Aston Martin DB5, который разогнался с 70 до 150 км в час. Разница между этими скоростями посчитана и выведена на монитор (см. картинку ниже).
Литеральная нотация
- это простейший и пожалуй самый популярный способ создания объектов.
Все что заключено в фигурных скобках это код объекта:
name, speed1 и speed2 - свойства объекта (они же переменные), а calculateTheDifference - метод (он же функция). Все что стоит после двоеточия представляют собой значения. Последние четыре строки кода выводят название автомобиля и разницу между скоростями на монитор.
В конце каждого свойства и метода ставится запятая (кроме последнего значения). Ключевое слово this говорит нам о том, что используемые свойства относятся к этому объекту.
Для того чтобы получить доступ к тому или иному значению объекта используется точечная нотация. С ней мы уже сталкивались ранее:
Здесь car - это переменная в которой находится наш объект, "точка" - операция доступа, name и calculateTheDifference() - имя свойства и метода соответственно.
Нотация конструктора
Рассмотрим еще один способ, позволяющий создать объект JavaScript.
Его ключевое отличие состоит в том, что сначала мы создаем пустой объект с помощью ключевого слова new и функции-конструктора Object(), а потом добавляем к нему интересующие нас свойства и методы. Наглядно это выглядит вот так:
Т.е. по сути перед нами тот же самый объект, но созданный иначе.
А теперь давайте предположим что у Вас на странице не один, а сразу два объекта. Как быть тогда? Все очень просто, сначала мы создаем шаблон со свойствами и методами объекта:
Здесь мы имеем функцию Car с тремя параметрами: name, speed1, speed2. Далее создаем два объекта с уже конкретными значениями:
Для каждого автомобиля создается переменная где прописывается его название, фраза ", разница в скорости составляет:" и собственно сама разница:
Обратите внимание на операцию += (где написано details1 и details2), она применяется для добавления контента к уже имеющейся переменной.
Все в сборе это выглядит вот так:
Это то что мы получаем на выходе:
Спасибо за внимание!
Появились вопросы? Что-то не получилось? Пишите в комментариях. Вместе мы сможем со всем разобраться)
Если статья оказалась полезной предлагаю подписаться на канал.