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.

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

Итоговый код

Использование функции-конструктора для создания объектов

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