Буквенные обозначения и конструкторы функций
Есть разные способы создания объектов в JavaScript. В этой статье мы сосредоточимся на создании объектов с использованием буквальной нотации и конструкторов функций.
Терминология
Прежде чем переходить к созданию объектов, давайте взглянем на некоторые термины, которые используются, когда речь идет об объектах. Объекты записываются внутри фигурных скобок, как в примере, показанном ниже. В этом примере объект хранится в переменной с именем person1 и может называться объектом person1. Свойства рассказывают нам об объекте. Здесь свойства name и DOB (дата рождения). Если функция является частью объекта, она называется методом - действие, которое может быть выполнено с объектом.
В этом примере используется метод age, который вычисляет возраст человека. Подобно именованным переменным и функциям, свойства и методы в объектах имеют имя и значение. Когда мы говорим об объектах, они называются ключами и значениями. В этом примере это ключи name, DOB и age. Соответствующие им значения: Jim, 1997 и функция, вычисляющая возраст. Значения могут быть строками, числами, логическими значениями, массивами или даже другим объектом.
Буквенное обозначение
Мы только что видели наш первый пример объекта: объект person1. Это также пример объекта, созданного с использованием буквального обозначения. В литерале объекта вы начинаете с определения имени переменной для объекта (в данном случае person1), фактический объект - это фигурные скобки и содержимое внутри фигурных скобок. Двоеточие используется для отделения каждого ключа от его значения, а каждое свойство и метод отделяются запятой (за исключением последнего значения). Как упоминалось выше, значения могут быть строками, числами, логическими значениями, массивами или даже другим объектом. Когда мы устанавливаем наши свойства, значения обрабатываются так же, как и переменные. Итак, поскольку Jim - это строка, мы используем кавычки, и (поскольку 1997 - это число) кавычки не используются. Если бы этот объект имел логическое свойство isMarried, то его значение было бы либо true, что указывает на то, что Джим женат, либо false, что указывает на то, что Джим не женат.
var person1 = {
name: 'Jim',
DOB: 1997,
age: function() {
return 2020 - this.DOB;
}
}
Доступ к объекту
Чтобы получить доступ к объекту, мы просто используем имя объекта (то есть имя переменной). В этом случае мы просто делаем console.log(person1). Это позволит нам получить доступ ко всему объекту.
var person1 = {
name: 'Jim',
DOB: 1997,
age: function() {
return 2020 - this.DOB;
}
}
console.log(person1);
Когда это записывается в консоль, мы получаем наш объект person1:
{name: "Jim", DOB: 1997, age: function}
Допустим, мы не хотим иметь доступ ко всему объекту. Для доступа к отдельным свойствам или методам объекта мы используем так называемую точечную нотацию. Для этого мы просто используем имя объекта (в данном случае person1), за которым следует точка, а затем имя свойства или метода, к которому мы хотим получить доступ objectName.propertyName. Например, если мы хотим получить доступ к имени нашего объекта person1, мы просто сделаем person1.name. В следующем примере мы получаем доступ к имени (person1) и методу возраста (person1.age()), который вычисляет возраст человека, и вводим его в консоль в виде строки:
var person1 = {
name: 'Jim',
DOB: 1997,
age: function() {
return 2020 - this.DOB;
}
}
console.log("Hello, I'm " + person1.name + " and I'm " + person1.age() + " years old.");
Итак, теперь в консоли мы получаем следующее. Как видите, был получен доступ к имени, а также к возрасту, который был рассчитан с помощью метода age:
Hello, I'm Jim and I'm 23 years old.
Мы также можем получить доступ к свойствам или методу объекта, используя скобку: objectName['properyName']. В этом синтаксисе имя объекта следует за квадратными скобками, а свойство или метод заключено в кавычки внутри квадратных скобок:
console.log(person1['name']); console.log(person1['age']()); console.log(person1['name'] + ' is ' + person1['age']() + ' years old.');
И когда это записывается в консоль, мы получаем следующее:
Jim 23 Jim is 23 years old.
Конструкторы функций
Другой способ создания объектов - использование конструкторов функций. Бывают случаи, когда вам может понадобиться создать несколько объектов с одинаковыми свойствами (например, контакты и их контактная информация). С помощью конструкторов функций вы можете создать схему для создания объектов. Допустим, у нас есть следующий литерал объекта:
var contact = {
name: 'John Doe',
email: '[email protected]',
DOB: 1985,
age: function () {
return 2020 - this.DOB;
}
}
Затем, допустим, мы хотим создать приложение, которое позволяет пользователям добавлять и хранить свои контакты вместе со своей контактной информацией. Можно предположить, что пользователь будет добавлять большое количество контактов. В этом случае было бы лучше создать какой-то план, а не проходить процесс создания объектных литералов для каждого отдельного контакта. Здесь на помощь приходят конструкторы функций.
Для этого мы создаем функцию под названием Контакт, которая будет использоваться в качестве схемы для создания новых объектов, представляющих контакты пользователя (название функции по соглашению начинается с заглавной буквы). В этом случае функция имеет четыре параметра (имя, адрес электронной почты, дата рождения и братья и сестры). Каждый из этих параметров устанавливает значение свойства объекта. Что касается метода (age), он одинаков для всех объектов, созданных с помощью этой функции. Как и раньше, фактическим объектом являются фигурные скобки и содержимое внутри фигурных скобок. Также обратите внимание, что каждый из операторов внутри объекта заканчивается точкой с запятой, а не запятой (которая используется в буквальном обозначении).
Отличие заключается в использовании ключевого слова this. При использовании в объекте значение this - это сам объект. Он представляет собой создаваемый объект. Поэтому вместо использования ключа типа name (как мы это делали в приведенном выше примере литерала объекта) мы используем this, чтобы показать, что свойство или метод принадлежит объекту. Другими словами, используя, например, this.name, мы говорим, что name принадлежит объекту Контакт.
function Contact(name, email, DOB, siblings) {
this.name = name;
this.email = email;
this.DOB = DOB;
this.siblings = siblings;
this.age = function (DOB) {
return 2020 - this.DOB;
}
}
Теперь, когда у нас есть план контакта, мы можем создать экземпляры этого объекта. В нашем примере это означает создание определенных контактов. Для этого мы используем ключевое слово new, а затем вызываем функцию, которую мы определили выше (Контакт). Затем мы передаем аргументы. Помните, что когда мы создавали наш шаблон Контакт, у нас было четыре параметра (имя, адрес электронной почты, DOB, и братья и сестры). Итак, теперь, когда мы вызываем функцию, мы передаем четыре соответствующих аргумента. В приведенном ниже примере аргументами для john являются "John Doe", "[email protected]", 1985, а для массива ["Tom", "Anne"]. Затем мы сохраняем это в переменной с именем john. Что касается метода age, помните, что каждый экземпляр получит тот же метод, который определен выше. И каждый раз, когда мы создаем новый экземпляр, передаются разные аргументы, поскольку каждый экземпляр представляет определенный контакт. Обратите внимание на то, что аргументы, переданные для carol, уникальны для нее, так же как аргументы, переданные для john, уникальны для него.
Итак, теперь мы создали два новых контакта, каждый с одной строкой кода. Теперь очевидны преимущества использования конструкторов функций для создания объектов. Если бы у нас было всего 10 контактов (экземпляров), нам потребовалось бы всего около 10 строк кода (по одной на контакт), по сравнению с тем, сколько еще строк кода нам нужно было бы написать, если бы мы создавали каждый контакт с помощью буквальное обозначение.
var john = new Contact("John Doe", "[email protected]", 1985, ["Tom", "Anne"]);
var carol = new Contact("Carol Lee", "[email protected]", 1965, ["David", "Mary", "Rose"]);
Доступ к экземплярам
Для доступа к каждому экземпляру мы просто используем имя созданного экземпляра, в нашем случае john и carol: console.log(john) и console.log(carol).
var john = new Contact("John Doe", "[email protected]", 1985, ["Tom", "Anne"]);
var carol = new Contact("Carol Lee", "[email protected]", 1965, ["David", "Mary", "Rose"]);
console.log(john);
console.log(carol);
Как и в нашем примере литерала объекта выше, простое использование имени позволит нам получить доступ ко всему объекту. И когда мы проверяем консоль, это действительно так. И так получаем два наших контакта:
Contact {
name: 'John Doe',
email: '[email protected]',
DOB: 1985,
siblings: [ 'Tom', 'Anne' ],
age: [Function]
}
Contact {
name: 'Carol Lee',
email: '[email protected]',
DOB: 1965,
siblings: [ 'David', 'Mary', 'Rose' ],
age: [Function]
}
Чтобы получить доступ к свойствам или методам наших экземпляров, мы используем точечную нотацию (точно так же, как мы это делали при использовании буквальной нотации), используя имена наших созданных экземпляров (john и carol), за которыми следует точка, а затем имя свойства или метода, которое мы хотим получить доступ. Мы можем записывать наши два контакта и их информацию в консоль, используя \n для разрывов строк и даже добавляя разделитель между двумя контактами, чтобы результат было легче читать:
console.log("Name: " + john.name + "\n" + "Email: " + john.email + "\n" + "Siblings: " + john.siblings + "\n" + "Age: " + john.age());
console.log('\n*******************************\n');
console.log("Name: " + carol.name + "\n" + "Email: " + carol.email + "\n" + "Siblings: " + carol.siblings + "\n" + "Age: " + carol.age());
Результат в консоли выглядит следующим образом. Теперь мы получаем контактную информацию для Джона и Кэрол с переносом строки после каждого свойства, а также разделитель, добавленный между двумя контактами.
Name: John Doe Email: [email protected] Siblings: Tom,Anne Age: 35 ******************************* Name: Carol Lee Email: [email protected] Siblings: David,Mary,Rose Age: 55
Резюме
В этой статье были рассмотрены два разных способа создания объектов в JavaScript. После определения терминологии, которая используется при разговоре об объектах, мы рассмотрели, как создавать объекты, используя буквальную нотацию, а также как получить доступ ко всему объекту, его отдельным свойствам и методам. В следующем разделе обсуждается, как создавать объекты с помощью конструкторов функций, а также как получить доступ к экземплярам объекта и их индивидуальным свойствам и методам. Хотя объекты, созданные с использованием буквальной нотации, являются самым простым способом создания объекта, конструкторы функций могут пригодиться при создании нескольких объектов с одинаковыми свойствами.
