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

На этом уроке мы рассмотрим процесс создания собственных объектов на языке JavaScript.

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

В качестве примера рассмотрим процесс создания объекта mySmart (мой смартфон). Все действия связанные с созданием и использованием нашего объекта представим в виде следующих этапов:

1. Создадим пустой объекта mySmart, т.е. объект, не содержащий ни свойств, ни методов:
   JavaScript

   var mySmart = new Object();

2. Добавим несколько свойств к объекту mySmart, использую оператор разыменовывания (.):
   JavaScript

   mySmart.model = "Asus PadFone S";
   mySmart.year = "2014";
   mySmart.price = "280$";

3. Выведем значения свойств объекта mySmart, используя оператор разыменовывания (.) и квадратные скобки (ассоциативный массив):
   JavaScript

   alert(mySmart["model"]);
   alert(mySmart.year);
   alert(mySmart.price);

4. Создадим метод (функцию), которая будет выводить на экран все свойства этого объекта:
   JavaScript

   function mySmartShow()
   {
     for (var i in mySmart)
     {
       Document.write (i + ":" + mySmart[i]+"<br>");
     }
   }

5. Добавим к объекту mySmart метод show(), который будет реализовывать функцию mySmartShow():
   JavaScript

   mySmart.show = mySmartShow;

6. Выведем на экран все свойства объекта mySmart, используя метод show():
   JavaScript

   mySmart.show();

   Примечание: вызывая метод show(), мы тем самым вызываем функцию mySmartShow().

7. Но действия 4 – 5 можно упростить, если мы данную функцию будем использовать только как метод объекта mySmart. В этом случае функцию можно сделать безымянной и привязать её сразу к методу show.
   JavaScript

   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.