Уроки JavaScript — как начать работать с объектами

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

По сути, объект — это совокупность свойств, а свойство состоит из ключа (идентификатора) и значения. В этом смысле объекты в JavaScript похожи на ассоциативные массивы в PHP, но на этом сходство кончается.

В предыдущем уроке мы рассмотрели переменные в JavaScript — основные моменты их использования. В этом практическом уроке мы сосредоточимся на основных моментах по объектам JavaScript и принципам работы с ними. Мы рассмотрим основы, для которых требуется наличие базовых практических знаний JavaScript. Если вам нужна помощь, просмотрите наши предыдущие уроки по программированию на яваскрипт.

Что такое объекты JavaScript

Рассмотрим простой пример объекта person в JavaScript:

let person = {
  name: "Petr",
  gender: "male",
  age: 40,
  worker: true
}

Это очень простой объект с четырьмя свойствами. Первое свойство содержит ключ «name» и значение «Petr«. Как видно из свойств примера, значения могут использовать много разных типов данных (строки, целые числа, логические и т.д.).

Что делает объекты такими полезными, но также немного запутанными, это то, что значения свойств могут быть функциями. Что выглядит примерно так:

let person = {
  name: "Petr",
  greeting: function() {
    console.log("Aloha " + this.name + "!")
  }
};
person.greeting(); // Aloha Petr!

Данный объект содержит свойство greeting, значением которого является функция. Ниже после определения функции и самого объекта мы можем вызвать эту функцию с помощью следующего синтаксиса: {объект}.{свойство объекта — функция}();. В нашем примере это выглядит следующим образом: person.greeting();. Если вы ссылаетесь на свойства одного объекта, вы можете использовать ключевое слово this.

Если вы раньше работали с объектами PHP, здесь идея очень похожа. Но, несмотря на свою простоту, за синтаксисом объектов в JavaScript часто кроется огромная сила.

Работа с JavaScript объектами

Давайте немного вернемся назад и научимся создавать простые объекты и управлять ими. Вот основные правила по объектам:

они всегда определяются фигурными скобками объект{…};
названия свойств нужно брать в кавычки, если они содержат специальные символы, например тире, или если название свойства (ключ) состоит из нескольких слов;
значения свойств могут быть разных типов, включая строки, целые числа, массивы и другие объекты;
последнее свойство объекта может заканчиваться запятой.

Теперь давайте создадим более сложный тестовый объект, содержащий некоторую полезную информацию, которой мы будем манипулировать:

let kniga = {
  type: 'book',
  title: 'Eneida',
  author: 'Ivan Kotlyarevskiy',
  length: 303,
  'Ivan Kotlyarevskiy': {
    type: 'author',
    "first-name": 'Ivan',
    "last-name": 'Kotlyarevskiy'
  },
  price: 150,
  timeToRead: function() {
    return ( this.length * 1.25 / 60 + " hours" );
  }
}

Чтобы получить значение свойства, можно использовать нотацию либо точкой, либо квадратной скобкой, как показано в примере ниже:

console.log( kniga.type ); // book
console.log( kniga["title"] ); // Eneida

Это выведет в консоли браузера тип и название книги.

Подобным образом мы можем обращаться к функции, содержащейся в объекте, просто добавив скобки в конце (и параметры, при необходимости):

console.log( kniga.timeToRead() ); // 6.3125 hours
console.log( kniga['timeToRead']() ); // 6.3125 hours

В данном примере я использую функцию timeToRead(), которая примерно вычисляет время, необходимое для прочтения книги. Отталкиваясь от того, что средняя скорость чтения составляет 120-200 слов в минуту, грубо говоря нужно 1,25 минуты на страницу (на странице примерно 230-250 слов). Я умножил общее количество страниц на 1,25, чтобы получить количество минут, необходимых для полного прочтения. Затем минуты делю на 60, чтобы получить необходимое для полного прочтения книги количество часов.

Использование конструкторов в объектах JavaScript

Пока наш код выше неплохой, но он может быть гораздо лучшим. К примеру, когда нам нужно будет создать несколько объектов с одинаковой структурой. Здесь на помощь и приходят конструкторы. Если вы знакомы с объектно-ориентированным PHP, использование конструкторов в объектах JavaScript похоже на использование классов и объектов в PHP. Основная цель конструкторов — удобно создавать объекты, повторно используя код. Подумайте о конструкторе, как о способе инициализации класса. Взгляните на пример ниже, чтобы увидеть это наглядно:

function Kniga( title, author ) {
  this.title = title;
  this.author = author;
  this.info = function() {
    return this.title + ' — ' + this.author;
  }
}
let kniga_1 = new Kniga( 'Eneida', 'Ivan Kotlyarevskiy' );
let kniga_2 = new Kniga( 'Kaydasheva semya', 'Ivan Nechuy-Levitskiy' );
console.log( kniga_1.title );  // Eneida
console.log( kniga_2.info() ); // Kaydasheva semya — Ivan Nechuy-Levitskiy

Конструктор — это функция, которая динамически создает свойства для объекта. В примере конструктор назначает первому параметру значение this.title, а для второго — this.author. Он также создает функцию this.info, отображающую название и автора книги.

В функции мы можем ссылаться на характеристики с помощью ключевого слова this. Вне функции мы используем нотацию точкой. Прелесть такого подхода заключается в возможности повторного использования. Вы можете создать сколько угодно данных о книгах, создав новый объект с помощью класса Kniga, объявив его new Kniga();. Объект будет содержать все функции и другие элементы, необходимые для работы.

Вместо вывода

В этом практическом уроке мы ознакомились с объектами JavaScript и узнали, как начать с ними работать. На примерах увидели, как можно использовать объекты для создания структур данных с аккуратным, понятным и гибким кодом. Также осмотрели основы и примеры использования конструкторов в объектах Яваскрипт.

Был ли этот урок полезен вам? Дайте нам знать об этом в разделе комментариев ниже.

Теги: JavaScript