Как сделать объект
Обновлено: 02.07.2024
Объектно-ориентированное программирование на сегодняшний день является одной из господствующих парадигм в разработке приложений, и в JavaScript мы также можем использовать все преимущества ООП. В то же время применительно к JavaScript объектно-ориентированное программирование имеет некоторые особенности.
Объекты
В прошлых темах мы работали с примитивными данными - числами, строками, но данные не всегда представляют примитивные типы. Например, если в нашей программе нам надо описать сущность человека, у которого есть имя, возраст, пол и так далее, то естественно мы не сможем представить сущность человека в виде числа или строки. Нам потребуется несколько строк или чисел, чтобы должным образом описать человека. В этом плане человек будет выступать как сложная комплексная структура, у которого будут отдельные свойства - возраст, рост, имя, фамилия и т.д.
Для работы с подобными структурами в JavaScript используются объекты . Каждый объект может хранить свойства, которые описывают его состояние , и методы, которые описывают его поведение
Создание нового объекта
Есть несколько способов создания нового объекта.
Первый способ заключается в использовании конструктора Object :
В данном случае объект называется user .
Выражение new Object() представляет вызов конструктора - функции, создающей новый объект. Для вызова конструктора применяется оператор new . Вызов конструктора фактически напоминает вызов обычной функции.
Второй способ создания объекта представляет использование фигурных скобок:
На сегодняшний день более распространенным является второй способ.
Свойства объекта
После создания объекта мы можем определить в нем свойства. Чтобы определить свойство, надо после названия объекта через точку указать имя свойства и присвоить ему значение:
В данном случае объявляются два свойства name и age , которым присваиваются соответствующие значения. После этого мы можем использовать эти свойства, например, вывести их значения в консоли:
Также можно определить свойства при определении объекта:
В этом случае для присвоения значения свойству используется символ двоеточия, а после определения свойства ставится запятая (а не точка с запятой).
Кроме того, доступен сокращенный способ определения свойств:
В данном случае названия переменных также являются и названиями свойств объекта. И таким образом можно создавать более сложные конструкции:
Методы объекта
Методы объекта определяют его поведение или действия, которые он производит. Методы представляют собой функции. Например, определим метод, который бы выводил имя и возраст человека:
Как и в случае с функциями методы сначала определяются, а потом уже вызываются.
Также методы могут определяться непосредственно при определении объекта:
Как и в случае со свойствами, методу присваивается ссылка на функцию с помощью знака двоеточия.
Чтобы обратиться к свойствам или методам объекта внутри этого объекта, используется ключевое слово this . Оно означает ссылку на текущий объект.
Также можно использовать сокращенный способ определения методов, когда двоеточие и слово function опускаются:
Синтаксис массивов
Существует также альтернативный способ определения свойств и методов с помощью синтаксиса массивов:
Название каждого свойства или метода заключается в кавычки и в квадратные скобки, затем им также присваивается значение. Например, user["age"] = 26 .
При обращении к этим свойствам и методам можно использовать либо нотацию точки ( user.name ), либо обращаться так: user["name"]
Также можно определить свойства и методы через синтаксис массивов напрямую при создании объекта:
Строки в качестве свойств и методов
Также следует отметить, что названия свойств и методов объекта всегда представляют строки. То есть мы могли предыдущее определение объекта переписать так:
С одной стороны, разницы никакой нет между двумя определениями. С другой стороны, бывают случаи, где заключение названия в строку могут помочь. Например, если название свойства состоит из двух слов, разделенных пробелом:
Только в этом случае для обращении к подобным свойствам и методам мы должны использовать синтаксис массивов.
Динамическое определение имен свойств и методов
Синтаксис массивов открывает нам другую возможность - определение имени свойства вне объекта:
Благодая этому, например, можно динамически создавать объекты с произвольными названиями свойств:
Удаление свойств
Выше мы посмотрели, как можно динамически добавлять новые свойства к объекту. Однако также мы можем удалять свойства и методы с помощью оператора delete . И как и в случае с добавлением мы можем удалять свойства двумя способами. Первый способ - использование нотации точки:
Либо использовать синтаксис массивов:
Например, удалим свойство:
После удаления свойство будет не определено, поэтому при попытке обращения к нему, программа вернет значение undefined.
Константные объекты
Возможно, нам поребуется, чтобы объект нельзя было изменить, то есть сделать константным. Однако просто определить его как обычную константу с помощью оператора const недостаточно. Например:
Здесь мы видим, что свойство объекта изменило свое значение, хотя объект определен как константа.
Оператор const лишь влияет на то, что мы не можем присвоить константе новое значение, например, как в следующем случае:
Тем не менее значения свойств объекта мы можем изменять.
Чтобы сделать объект действительно константным, необходимо применить специальный метод Object.freeze() . В этот метод в качестве параметра передается объект, который надо сделать константным:
Создание объекта из переменных и констант
При создании объекта его свойствам могут передаваться значения переменных, констант или динамически вычисляемые результаты функций:
Но если названия констант/переменных совпадает с названиями свойств, то можно сократить передачу значений:
В данном случае объект person автомтически получит свойства, названия которых будут соответствовать названиям констант, а в качестве значений иметь значения этих констант.
То же самое относится к передаче функций методам объекта:
В данном случае объект person имеет два метода, которые соответствуют переданным в объект функциям - display() и move() . Стоит отметить, что при такой передаче функций методам объекта, мы по прежнему можем использовать в этих функциях ключевое слово this для обращения к функциональности объекта. Однако стоит быть осторожным при передаче лямбд-выражений, поскольку для глобальных лямбд-выражений this будет представлять объект окна браузера:
Фукция Object.fromEntries()
С помощью функции Object.fromEntries() можно создать объект из набора пар ключ-значение, где ключ потом будет представляет название свойства. Например, создадим объект из массивов:
Здесь объект создается из массива personData, который содержит два подмассива. Каждый подмассив содержит два элемента и фактически представляет пару ключ-значение. Первый элемент представляет ключ, а второй - значение.
Объекты — это единственный составной тип данных в JavaScript, кроме объектов существует еще пять примитивных типов данных: Number, String, Boolean, Undefined, и Null.
Определение объекта в JavaScript
Простой пример объекта в JavaScript:
Объект person имеет два свойства: firstName и lastName, которые, соответственно, имеют значения 'Frank' и 'Johnson'.
Главное отличие объектов от других типов данных заключается в том, что все операции с ними осуществляются по ссылке.
Сначала рассмотрим пример с примитивным типом данных:
А теперь сравним его с аналогичным примером с объектами:
В первом примере мы сначала присвоили переменной person1 значение переменной person2, а потом изменили person1. Мы убедились, что значение переменной person2 при этом не изменилось. Во втором же примере значение person2 также изменилось после того, как мы изменили person1. Это произошло из-за того, что присваивание объектов осуществляется по ссылке, т.е. person2 мы присвоили не значение person1, а ссылку на тот же объект, на который ссылается person1.
Каждое свойство объекта помимо имени и значения, имеет также три атрибута, каждый из которых имеет значение true по умолчанию:
- сonfigurable — данный атрибут определяет, доступно ли данное свойство для настройки: может ли оно быть изменено или удалено.
- enumerable — данный атрибут определяет, будет ли это свойство возвращено в циклах for/in.
- writable — данный атрибут определяет доступность свойства для записи.
Методы для работы (чтения и записи) с атрибутами свойств предусмотрены в стандарте ECMAScript 5, мы поговорим о них подробнее.
Создание объектов
В JavaScript существует три способа создания объектов: с помощью литерала объекта, с помощью конструктора Object и с помощью метода Object.create (последний способ предусмотрен только в стандарте ECMAScript 5).
Литералы объектов
Наиболее распространенный и, на самом деле, самый простой способ создания объекта — использование литерала объекта. Литерал объекта представляет собой фигурные скобки, внутри которых через запятую перечислены свойства:
Конструктор Object
Второй способ создания объектов в JavaScript — использование конструктора Object:
Кроме конструктора Object существует еще несколько встроенных конструкторов, например, Date, Array, RegExp и т.д.
Помимо встроенных конструкторов, JavaScript позволяет определять собственные функции-конструкторы и инициализировать объекты с помощью оператора new. Об этом мы поговорим в отдельной статье.
Метод Object.create()
В ECMAScript 5, кроме литералов объекта и конструктора Object, существует еще один способ создания объектов — с помощью метода Object.create(). Этот метод принимает один обязательный параметр — прототип создаваемого объекта, и второй необязательный — список свойств объекта.
Доступ к свойствам объекта
Получить значение свойства объекта можно, указав имя свойства через точку:
Или указав имя свойства в квадратных скобках:
Второй способ является более гибким. Через точку можно указать только строковое имя свойства, в качестве имени свойства в квадратных скобках может быть число, вычисляемое значение или переменная.
Если мы пытаемся обратиться к свойству объекта, которого не существует — будет возвращено значение undefined. Однако попытка получить свойство значения null или undefined вызовет ошибку.
Объект имеет как собственные свойства (определенные в нем), так и унаследованные (определенные в цепочке прототипов). Проверить, имеет ли объект определенное свойство (собственное или унаследованное), можно с помощью оператора in:
Если нужно проверить только собственные свойства объекта, можно использовать метод hasOwnProperty():
Также получить свойства объекта можно в цикле:
Чтобы удалить свойство объекта, можно воспользоваться оператором delete. Нельзя удалить унаследованное свойство, а также свойство, имеющее атрибут configurable равное false. Наследуемое свойство необходимо удалять у объекта-прототипа. Кроме того, нельзя удалить свойства глобального объекта, которые были объявлены с ключевым словом var.
Оператор delete возвращает истину, если удаление прошло успешно. И, как ни удивительно, что она также возвращает истину, если свойство не существует или не может быть удалено.
Объект – это неупорядоченная коллекция свойств. Свойство – это часть объекта имитирующая переменную. Свойство состоит из имени и значения.
В JavaScript есть три категории объектов:
- Объекты базового типа – это объекты, определённые в спецификации ECMAScript. Например, объекты типа Array , Function , Date или RegExp являются объектами базового типа.
- Объекты среды выполнения – это объекты, определённые в среде выполнения (такой как браузер). Например, объекты типа HTMLElement , являются объектами среды выполнения.
- Пользовательские объекты – это любой объект, созданный в результате выполнения программного кода JavaScript.
Создание объекта
Объект можно создать с помощью литерала объекта или оператора new с конструктором.
Литерал объекта – это заключённый в фигурные скобки список из нуля или более свойств (пар имя: значение), разделённых запятыми. Именем свойства может быть любой допустимый идентификатор, строковой литерал (допускается использовать пустую строку) или число. Числовые имена свойств автоматически преобразуются в строки. Значением свойства может быть значение любого типа или выражение (значением свойства в этом случае станет результат вычисления выражения):
Создание объекта с помощью оператора new:
Операции с объектом
Основные операции производимые с объектами – это добавление новых свойств, изменение уже существующих свойств, удаление свойств и обращение к свойствам.
Добавить новое свойство в объект можно присвоив свойству значение. Чтобы присвоить свойству значение, к нему нужно получить доступ. Для доступа к свойству используется один из операторов доступа: . (точка) или [] (квадратные скобки):
Обращение к свойству и изменение значения осуществляется точно так же (с помощью операторов доступа):
Удаление свойства осуществляется с помощью оператора delete:
Для перебора свойств объекта используется цикл for-in:
Методы объекта
Свойство, значением которого является функция, называется методом . Вызов метода осуществляется точно также, как и вызов обычной функции – с помощью оператора () (оператор вызова):
Для доступа к свойствам объекта внутри метода используется ключевое слово this . Оно содержит ссылку на объект, с помощью которого был вызван метод:
Вместо ключевого слова this можно использовать непосредственно имя объекта, но это не очень удобно, так как, если изменится имя объекта, в методах придётся также изменять имя:
Object (объект) - это более сложный тип данных в JS. Хочу напомнить, что все остальные типы данных, являются примитивными, так как могут содержать только простые значения: строки, числа, булевый тип, null, undefined и symbol. Всего в JS существует 7 типов данных.
Мы можем представить себе объект в виде ячейки с карточками, такая система хранения обычно используется в архивах, регистратурах и.т.д. Элемент объекта - это карточка с прикреплённой к ней закладкой с буквами алфавита. По закладке (ключу объекта), легко можно найти нужную карточку (значение). Закладка и карточка вместе, составляют классическую пару (свойства) объекта: ключ -> значение.
Создание объекта в JS
Создать новый объект можно двумя способами:
// через фигурные скобки
let cell = <>;
// с помощью конструкции new object
let cell = new Object();
На практике, для создания объекта чаще всего используют фигурные скобки <. >, ещё их называют литералами объекта. Мы только что создали пустой объект - ячейку без карточек. Предположим, что у нас уже есть и карточки, тогда создадим новый объект сразу с парами: ключ -> значение. Свойства объекта, нужно обязательно разделять запятой.
let cell = a: "Акунин", // под ключом "a" хранится значение "Акунин"
b: "Белов",
с: "Семёнов"
>;
Команда console.log выведет объект целиком в консоль.
Для вывода нужного значения объекта, обратимся к нему по ключу. Пишем имя объекта, ставим точку и указываем ключ, значение которого хотим вывести.
Добавление в объект
В существующий объект в JS можно добавлять новые свойства или другие объекты. Рассмотрим пример:
Создадим объект с именем box, содержащий два свойства.
let box = width: 300,
height: 150,
>;
Теперь добавим в него новое свойство.
Проверим через консоль, что находится сейчас в объекте.
Новое свойство успешно добавилось в объект.
Создадим новый объект color внутри объекта box.
box.color = bg: "white",
font: "black"
>;
На выходе получили один объект, вложенный в другой.
Удаление из объекта
Оператор delete удаляет из объекта в JS ненужное свойство по ключу. Пара border: "red" удалилась из объекта.
Перебор объекта в JS
Сделать перебор объекта - это достоверный способ узнать, что находится в объекте. Провести ревизию и затем удалить лишние элементы. Для перебора, нужно использовать цикл for in. Внутри цикла for инициализируем специальную переменную, куда будут попадать все ключи поочерёдно и на каждом новом проходе, выводить в консоль по одному свойству, пока они не закончатся.
for(let key in box) console.log(key + " " + "-" + " " + boxКак сделать объект);
>
Запустим аналогичный цикл для вложенного объекта:
for(let key in box.color) console.log(key + " " + "-" + " " + box.colorКак сделать объект);
Методы объектов в JS
Помимо свойств, у объектов есть методы, которые заставляют их что-то делать. Методами, называют функции, записанные в объекте. Научим кота говорить "Мяу!" и выведем в модальном окне.
let cat = name: "Барсик",
age: 3
>;
Узнать больше про объекты в JS, вы можете из моего видеокурса.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Комментарии ( 0 ):
Читайте также: