admin / 30.12.2017
Объекты — это единственный составной тип данных в JavaScript, кроме объектов существует еще пять примитивных типов данных: Number, String, Boolean, Undefined, и Null.
Содержание
Объект представляет собой неупорядоченный набор набор пар вида «ключ-значение». Каждая такая пара называется свойством объекта (функции называются методами), каждое свойство должно иметь уникальное имя, которое может быть строкой или числом. Значение свойства может быть любым: как значением простого типа, так и другим объектом.
Простой пример объекта в JavaScript:
Объект person имеет два свойства: firstName и lastName, которые, соответственно, имеют значения ‘Frank’ и ‘Johnson’.
Главное отличие объектов от других типов данных заключается в том, что все операции с ними осуществляются по ссылке.
Сначала рассмотрим пример с примитивным типом данных:
А теперь сравним его с аналогичным примером с объектами:
В первом примере мы сначала присвоили переменной person1 значение переменной person2, а потом изменили person1. Мы убедились, что значение переменной person2 при этом не изменилось. Во втором же примере значение person2 также изменилось после того, как мы изменили person1. Это произошло из-за того, что присваивание объектов осуществляется по ссылке, т.е. person2 мы присвоили не значение person1, а ссылку на тот же объект, на который ссылается person1.
Каждое свойство объекта помимо имени и значения, имеет также три атрибута, каждый из которых имеет значение true по умолчанию:
Методы для работы (чтения и записи) с атрибутами свойств предусмотрены в стандарте ECMAScript 5, мы поговорим о них подробнее.
В JavaScript существует три способа создания объектов: с помощью литерала объекта, с помощью конструктора Object и с помощью метода Object.create (последний способ предусмотрен только в стандарте ECMAScript 5).
Наиболее распространенный и, на самом деле, самый простой способ создания объекта — использование литерала объекта. Литерал объекта представляет собой фигурные скобки, внутри которых через запятую перечислены свойства:
Второй способ создания объектов в JavaScript — использование конструктора Object:
Кроме конструктора Object существует еще несколько встроенных конструкторов, например, Date, Array, RegExp и т.д.
Помимо встроенных конструкторов, JavaScript позволяет определять собственные функции-конструкторы и инициализировать объекты с помощью оператора new. Об этом мы поговорим в отдельной статье.
В 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
Существует также альтернативный способ определения свойств и методов с помощью синтаксиса массивов:
Название каждого свойства или метода заключается в кавычки и в квадратные скобки, затем им также присваивается значение.
Например, .
При обращении к этим свойствам и методам можно использовать либо нотацию точки (), либо обращаться так:
Также следует отметить, что названия свойств и методов объекта всегда представляют строки. То есть мы могли предыдущее определение объекта переписать так:
С одной стороны, разницы никакой нет между двумя определениями. С другой стороны, бывают случаи, где заключение названия в строку могут помочь. Например, если название свойства состоит из двух слов, разделенных пробелом:
Только в этом случае для обращении к подобным свойствам и методам мы должны использовать синтаксис массивов.
Выше мы посмотрели, как можно динамически добавлять новые свойства к объекту. Однако также мы можем удалять свойства и методы с помощью оператора delete. И как и в случае с добавлением мы можем удалять свойства двумя способами. Певый способ — использование нотации точки:
delete объект.свойство
Либо использовать синтаксис массивов:
delete объект[«свойство»]
Например, удалим свойство:
После удаления свойство будет не определено, поэтому при попытке обращения к нему, программа вернет значение undefined.
НазадСодержаниеВперед
Деструктуризация или разбиение на элементы — новая возможность в языке Javascript (ES2015/ES6), которая позволяет извлекать данные из массивов и объектов, используя синтаксис объявления массивов и литералов объектов соответственно.
Мне кажется начинать изучение этой темы лучше с массивов. Оно как-то нагляднее что ли выглядит, особенно, когда в первый раз начинаешь читать об этом.
В следующем примере мы используем деструктуризацию для задания значения переменных из массива:
Казалось бы, ничего интересного, и даже в старом стиле вроде как нагляднее.
Но использование деструктуризации позволяет нам, например, поменять местами значения переменных без использования третьей:
Функции всегда могли возвращать массивы.
Но благодаря деструктуризации мы можем получить дополнительную гибкость.
В ES5 такой пример свелся либо к вызову функции getAges() 3 раза, либо к дополнительной переменной, которая бы хранила значение функции.
Допустим, мы знаем, что предыдущая функции возвращает всегда массив из 3-х возрастов.
Если нам не нужны все 3 из них, мы можем просто игнорировать ненужные значения, опуская названия переменных:
После того, как мы поняли суть работы с массивами, понять как работает деструктуризация с объектами труда не составит.
В примере выше мы создали две новые переменные, значения которых были взяты из свойств объекта с точно таким же именем. А если мы хотим объявить новые переменные и присвоить им значения старых? Пожалуйста:
Часто бывает что у нас есть объект с опциями или метаданными, и на основе него мы хотим сформировать какой-то другой, новый объект. Давайте рассмотрим следующий пример:
Да, деструктуризация будет работать и в этом случае.
Использование деструктуризации может помочь сократить количество строк кода и сделать его более читабельным. Безусловно, это очередной инструмент, которым нужно уметь пользоваться.
Русский
ES2015/ES6, Destructuring, Деструктуризация
❮ ПредыдущаяСледующая Глава ❯
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