admin / 30.12.2017

JavaScript Учебник — Создание Объектов

Объекты — это единственный составной тип данных в 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(). Этот метод принимает один обязательный параметр — прототип создаваемого объекта, и второй необязательный — список свойств объекта.

Чтобы создать объект без прототипа, можно вызвать метод Object.create() c параметром null. Т.к. прототипом любого объекта при создании его с помощью литерала объекта или конструктора Object является Object.prototype, создать «обычный» объект можно с помощью Object.create(Object.prototype).

Рассмотрим примеры:

Доступ к свойствам объекта

Получить значение свойства объекта можно, указав имя свойства через точку:

Или указав имя свойства в квадратных скобках:

Второй способ является более гибким. Через точку можно указать только строковое имя свойства, в качестве имени свойства в квадратных скобках может быть число, вычисляемое значение или переменная.

Если мы пытаемся обратиться к свойству объекта, которого не существует — будет возвращено значение undefined. Однако попытка получить свойство значения null или undefined вызовет ошибку.

Объект имеет как собственные свойства (определенные в нем), так и унаследованные (определенные в цепочке прототипов). Проверить, имеет ли объект определенное свойство (собственное или унаследованное), можно с помощью оператора in:

Если нужно проверить только собственные свойства объекта, можно использовать метод hasOwnProperty():

Также получить свойства объекта можно в цикле:

Чтобы удалить свойство объекта, можно воспользоваться оператором delete. Нельзя удалить унаследованное свойство, а также свойство, имеющее атрибут configurable равное false. Наследуемое свойство необходимо удалять у объекта-прототипа. Кроме того, нельзя удалить свойства глобального объекта, которые были объявлены с ключевым словом var.

Оператор delete возвращает истину, если удаление прошло успешно. И, как ни удивительно, что она также возвращает истину, если свойство не существует или не может быть удалено.

Объектно-ориентированное программирование

Последнее обновление: 08.04.2018

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

Объекты

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

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

Создание нового объекта

Есть несколько способов создания нового объекта.

Первый способ заключается в использовании конструктора :

var user = new Object();

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

Выражение представляет вызов конструктора — функции, создающей новый объект.

Для вызова конструктора применяется оператор new. Вызов конструктора фактически напоминает вызов обычной функции.

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

var user = {};

На сегодняшний день более распространенным является второй способ.

Свойства объекта

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

var user = {}; user.name = «Tom»; user.age = 26;

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

console.log(user.name); console.log(user.age);

Также можно определить свойства при определении объекта:

var user = { name: «Tom», age: 26 };

В этом случае для присвоения значения свойству используется символ двоеточия, а после определения свойства ставится запятая (а не точка с запятой).

Кроме того, доступен сокращенный способ определения свойств:

var name = «Tom»; var age = 34; var user = {name, age}; console.log(user.name); // Tom console.log(user.age); // 34

В данном случае названия переменных также являются и названиями свойств объекта. И таким образом можно создавать более сложные конструкции:

var name = «Tom»; var age = 34; var user = {name, age}; var teacher = {user, course: «JavaScript»}; console.log(teacher.user); // {name: «Tom», age: 34} console.log(teacher.course); // JavaScript

Методы объекта

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

Как и в случае с функциями методы сначала определяются, а потом уже вызываются.

Также методы могут определяться непосредственно при определении объекта:

Как и в случае со свойствами, методу присваивается ссылка на функцию с помощью знака двоеточия.

Чтобы обратиться к свойствам или методам объекта внутри этого объекта, используется ключевое слово this. Оно означает ссылку на текущий объект.

Также можно использовать сокращенный способ определения методов, когда двоеточие и слово function опускаются:

var user = { name: «Tom», age: 26, display(){ console.log(this.name, this.age); }, move(place){ console.log(this.name, «goes to», place); } }; user.display(); // Tom 26 user.move(«the shop»); // Tom goes to the shop

Синтаксис массивов

Существует также альтернативный способ определения свойств и методов с помощью синтаксиса массивов:

Название каждого свойства или метода заключается в кавычки и в квадратные скобки, затем им также присваивается значение.

JavaScript — Объекты

Например, .

При обращении к этим свойствам и методам можно использовать либо нотацию точки (), либо обращаться так:

Строки в качестве свойств и методов

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

С одной стороны, разницы никакой нет между двумя определениями. С другой стороны, бывают случаи, где заключение названия в строку могут помочь. Например, если название свойства состоит из двух слов, разделенных пробелом:

Только в этом случае для обращении к подобным свойствам и методам мы должны использовать синтаксис массивов.

Удаление свойств

Выше мы посмотрели, как можно динамически добавлять новые свойства к объекту. Однако также мы можем удалять свойства и методы с помощью оператора delete. И как и в случае с добавлением мы можем удалять свойства двумя способами. Певый способ — использование нотации точки:

delete объект.свойство

Либо использовать синтаксис массивов:

delete объект[«свойство»]

Например, удалим свойство:

После удаления свойство будет не определено, поэтому при попытке обращения к нему, программа вернет значение undefined.

НазадСодержаниеВперед

Деструктуризация или разбиение на элементы — новая возможность в языке Javascript (ES2015/ES6), которая позволяет извлекать данные из массивов и объектов, используя синтаксис объявления массивов и литералов объектов соответственно.

Деструктуризация массивов

Мне кажется начинать изучение этой темы лучше с массивов. Оно как-то нагляднее что ли выглядит, особенно, когда в первый раз начинаешь читать об этом.

Объявление переменных

В следующем примере мы используем деструктуризацию для задания значения переменных из массива:

Казалось бы, ничего интересного, и даже в старом стиле вроде как нагляднее.

Объектно-ориентированное программирование

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

Возврат несколько значений

Функции всегда могли возвращать массивы.

Но благодаря деструктуризации мы можем получить дополнительную гибкость.

В ES5 такой пример свелся либо к вызову функции getAges() 3 раза, либо к дополнительной переменной, которая бы хранила значение функции.

Игнорирование значений

Допустим, мы знаем, что предыдущая функции возвращает всегда массив из 3-х возрастов.

Если нам не нужны все 3 из них, мы можем просто игнорировать ненужные значения, опуская названия переменных:

Деструктуризация объектов

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

В примере выше мы создали две новые переменные, значения которых были взяты из свойств объекта с точно таким же именем. А если мы хотим объявить новые переменные и присвоить им значения старых? Пожалуйста:

Вложенные объекты

Часто бывает что у нас есть объект с опциями или метаданными, и на основе него мы хотим сформировать какой-то другой, новый объект. Давайте рассмотрим следующий пример:

Объект как параметр функции

Да, деструктуризация будет работать и в этом случае.

Итог

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

Русский

ES2015/ES6, Destructuring, Деструктуризация

Создание объектов (JavaScript)

❮ ПредыдущаяСледующая Глава ❯


Методы JavaScript

JavaScript методы являются действия, которые могут быть выполнены на объектах.

Способ JavaScript является свойством , содержащий определение функции.

Имущество Стоимость
firstName John
lastName Doe
age 50
eyeColor blue
fullName function() {return this.firstName + » » + this.lastName;}

Методы являются функциями хранятся в виде свойств объекта.


Доступ методов объекта

Вы создаете метод объекта со следующим синтаксисом:

methodName : function() { code lines }

Вы получаете доступ метод объекта со следующим синтаксисом:

Вы , как правило , описывают fullName() как метод объекта, человека и fullName как свойство.

fullName свойство будет выполняться (как функция) , когда она вызывается () .

Этот пример получает доступ к fullName()метод объекта лицо:

Если вы получаете доступ к fullNameсвойство, без него (), он возвращает определение функции:


Использование встроенных методов

В этом примере используется toUpperCase() метод строкового объекта, чтобы преобразовать текст в верхний регистр:

var message = «Hello world!»;
var x = message.toUpperCase();

Величина х, после выполнения кода выше:

HELLO WORLD!


Добавление новых методов

Методы Определение на объект выполняется в функции конструктора:

пример

function person(firstName, lastName, age, eyeColor) {
    this.firstName = firstName; 
    this.lastName = lastName;
    this.age = age;
    this.eyeColor = eyeColor;
    this.changeName = function (name) {
        this.lastName = name;
    };
}

changeName() функция присваивает значение имени свойству LastName человека.

JavaScript знает , какой человек , о котором вы говорите с "подставляя" this с myMother .

❮ ПредыдущаяСледующая Глава ❯

FILED UNDER : IT

Submit a Comment

Must be required * marked fields.

:*
:*