JavaScript - Создание собственных объектов

На этом уроке мы рассмотрим процесс создания собственных объектов на языке JavaScript.
Создание собственного объекта на языке JavaScript
В качестве примера рассмотрим процесс создания объекта mySmart
(мой смартфон). Все действия связанные с созданием и использованием нашего объекта представим в виде следующих этапов:
- Создадим пустой объекта
mySmart
, т.е. объект, не содержащий ни свойств, ни методов:var mySmart = new Object();
- Добавим несколько свойств к объекту
mySmart
, использую оператор разыменовывания (.
):mySmart.model = "Asus PadFone S"; mySmart.year = "2014"; mySmart.price = "280$";
- Выведем значения свойств объекта
mySmart
, используя оператор разыменовывания (.
) и квадратные скобки (ассоциативный массив):alert(mySmart["model"]); alert(mySmart.year); alert(mySmart.price);
- Создадим метод (функцию), которая будет выводить на экран все свойства этого объекта:
function mySmartShow() { for (var i in mySmart) { Document.write (i + ":" + mySmart[i]+"<br>"); } }
- Добавим к объекту
mySmart
методshow()
, который будет реализовывать функциюmySmartShow()
:mySmart.show = mySmartShow;
- Выведем на экран все свойства объекта
mySmart
, используя методshow()
:mySmart.show();
Примечание: вызывая метод
show()
, мы тем самым вызываем функциюmySmartShow()
. - Но действия 4 – 5 можно упростить, если мы данную функцию будем использовать только как метод объекта
mySmart
. В этом случае функцию можно сделать безымянной и привязать её сразу к методуshow
.mySmart.show = function() { for (var i in mySmart) { document.write (i + ":" + mySmart[i]+"<br>"); } }
Итоговый код
var mySmart = new Object(); mySmart.model = "Asus PadFone S"; mySmart.year = "2014"; mySmart.price = "280$"; mySmart.show = function() { for (var i in mySmart) { document.write (i + ":" + mySmart[i]+"<br>"); } } alert(mySmart["model"]); alert(mySmart.year); alert(mySmart.price); mySmart.show();
Использование функции-конструктора для создания объектов
В предыдущем разделе мы рассмотрели процесс создания одного объекта mySmart
, но если нам понадобиться создать ещё один подобный объект, то мы должны будем повторить все наши действия, которые мы проделали в предыдущем разделе, но уже для второго объекта. А что если нам понадобиться создать сотни подобных объектов?
Выход из этой ситуации есть, и он заключается в написании своей собственной функции-конструктора. Смысл данной функции заключается в том, что она будет автоматически добавлять свойства и методы для каждого создаваемого экземпляра объекта mySmart
. Т.е. наша задача сводится к написанию функции, которая бы выполняла инициализацию самого объекта.
Рассмотрим процесс создания функции-конструктора, которую можно было бы использовать следующим образом:
var smart1 = new Smart("Samsung Galaxy S4","2013","320$"); smart1.show(); var smart2 = new Smart("Samsung Galaxy Note 4 ","2015","680$"); smart2.show(); var smart3 = new Smart("LG L Bello","2012","190$"); smart3.show();
Создадим конструктор класса:
function Smart(model,year,price) { //Определение свойств //Переменная this (этот) указывает на объект, который создаётся в данный момент this.model = model; this.year = year; this.price = price; //Определение метода //Переменная this (этот) указывает на объект, для которого необходимо вывести данный метод this.show = function() { document.write ("Модель: " + this.model + "<br>"); document.write ("Год производства: " + this.year + "<br>"); document.write ("Цена: " + this.price + "<br>"); } }
Таким образом, наша функция-конструктор позволяет создавать множество аналогичных объектов Smart
.