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

Содержание:
  1. Создание собственного объекта на языке JavaScript
  2. Использование функции-конструктора для создания объектов
  3. Комментарии

На этом уроке мы рассмотрим процесс создания собственных объектов на языке 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>");
      }
    }

Итоговый код

JavaScript
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. Т.е. наша задача сводится к написанию функции, которая бы выполняла инициализацию самого объекта.

Рассмотрим процесс создания функции-конструктора, которую можно было бы использовать следующим образом:

JavaScript
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();

Создадим конструктор класса:

JavaScript
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.

Комментарии: 0