Раздел: Сайтостроение / JavaScript /

Классы, конструкторы и прототипы

Что такое JavaScript Что такое JavaScript

Небольшая книга о JavaScript, которая поможет вам в изучении JavaScript. В книге и рассылке сведения для начинающих: что такое JavaScript, как это работает, письма, которые помогут принять решение, надо ли вам это или нет, а также полезные ссылки на обучающие материалы. Подробнее...

Пришло время познакомиться с объектно-ориентированным программированием в JavaScript (ООП). Знакомство будет кратким и весьма поверхностным. Однако опытным программистам этого будет для начала вполне достаточно. А неопытным как всегда советую изучить полный обучающий курс по JavaScript:

>>> JavaScript, jQuery и Ajax с нуля до гуру >>>

Мы уже немного сталкивались с объектами здесь и здесь. Сегодня поговорим о них чуть более подробно. Принципы ООП я здесь рассматривать не буду. Подразумевается, что вы их знаете. В данной статье только то, что имеет отношение к JavaScript.

Классы в JavaScript

JavaScript не обладает полной поддержкой классов, как другие “полноценные” языки программирования, такие как Паскаль или С++. Однако в JavaScript имеется возможность создавать псевдоклассы, используя функции-конструкторы и прототипы объектов.

И, тем не менее, далее в этой статье будет использоваться термин “класс”, несмотря на то, что описываемые этим термином сущности не являются классом в полном смысле этого слова.

ПРИМЕЧАНИЕ
JavaScript 2.0 поддерживает настоящие классы. Но, поскольку ещё далеко не все пользователи работают с браузерами, которые поддерживают JavaScript 2.0, эта статья имеет отношение к JavaScript 1.5.

Конструкторы в JavaScript

Мы уже создавали массивы с помощью конструктора Array(). Таким образом можно создавать любые другие объекты:

//Создаём объект CurrDate "класса" ДАТА 
//с помощью конструктора Date() 
var CurrDate = new Date();

//Создаём объект M "класса" МАССИВ 
//с помощью конструктора Array() 
var M = new Array(8);

То есть для создания объекта мы сначала объявляем переменную, а затем инициализируем её с помощью оператора new, после которого указывается имя функции-конструктора.

Оператор new создаёт новый пустой объект без каких-либо свойств, а затем вызывает конструктор, в который передаётся только что созданный объект в виде значения ключевого слова this (если изучали ООП, то знаете, что это такое).

Функция-конструктор (или просто конструктор) выполняет инициализацию нового созданного объекта, то есть устанавливает значения всех свойств объекта в нужное программисту состояние. Свойства могут быть инициализированы непосредственно в теле конструктора константами или параметрами, которые передаются в конструктор.

Создать свой собственный конструктор можно довольно просто. Надо лишь написать функцию, добавляющую новые свойства к объекту, на который ссылается ключевое слово this.


//Создаём конструктор
function Coord(x, y) 
{
  this.X = x;
  this.Y = y;
  this.Z = 0;
}


//Создаём два объекта "класса" Coord
var Point1 = new Coord(15, 20);  //Point1 = {X:15, Y:20, Z:0};
var Point2 = new Coord(7, 4);    //Point2 = {X:7, Y:4, Z:0};

//Используем объекты в сценарии
document.write('Point1.X = ' + Point1.X + '<br>');
document.write('Point1.Y = ' + Point1.Y + '<br>');
document.write('Point1.Z = ' + Point1.Z + '<br>');

document.write('Point2.X = ' + Point2.X + '<br>');
document.write('Point2.Y = ' + Point2.Y + '<br>');
document.write('Point2.Z = ' + Point2.Z + '<br>');

В этом примере мы написали функцию-конструктор Coord, который инициализирует три свойства объекта: X, Y, Z. Причём значения X и Y может задавать программист при создании нового объекта, а Z всегда инициализируется равным нулю (в нашем примере).

Далее мы создаём два объекта и используем их в нашем сценарии.

Прототипы в JavaScript

Надеюсь, вы знаете, что функции объекта называются методами. Создать метод можно, например, так:

//Создаём конструктор
function Coord(x, y) 
{
  this.X = x;
  this.Y = y;
  this.Z = 0;
}

//Создаём объект "класса" Coord
var Point = new Coord(15, 20);
Point.Z = 2;  

//Создаём метод
Point.GetSum = function() {return this.X + this.Y + this.Z} 

//Вызываем метод
Point.GetSum();

Можно сделать то же самое другим способом (этот способ более подходит для ООП):

function Coord(x, y) 
{
  this.X = x;
  this.Y = y;
  this.Z = 0;

  //Создаём метод
  this.GetMul = function() {return this.X * this.Y * this.Z} 
}

Вызов метода будет таким же, как и в предыдущем примере.

Все объекты в JavaScript содержат внутреннюю ссылку на объект - прототип. Все свойства прототипа становятся свойствами другого объекта, для которого он является прототипом. Таким образом прототип является родителем для своего объекта, и объект наследует все свойства своего прототипа.

Когда мы делаем вот так:

function Объект() 
{
  ///
}

var Переменная = new Объект();

то оператор new устанавливает связь между Объектом и его прототипом (создаёт ссылку на прототип).

Прототипом Объекта является значение свойства prototype функции-конструктора (все функции в JavaScript имеют свойство prototype). Начальным значением этого свойства является ссылка на функцию-конструктор (constructor), с которой связан прототип. Все свойства, которые вы добавляете к прототипу, автоматически становятся свойствами объектов, создаваемых с помощью конструктора.

Пример:

//Создаём конструктор
function Coord(x, y, z) 
{
  this.X = x;
  this.Y = y;
  this.Z = z;
}

//Создаём метод для прототипа
Coord.prototype.GetMul = function() {return this.X * this.Y * this.Z} 

//Создаём два объекта "класса" Coord
var Point1 = new Coord(1, 2, 3);
var Point2 = new Coord(2, 3, 4);

//Вызываем методы
document.write(Point1.GetMul() + '<br>');  //6
document.write(Point2.GetMul() + '<br>');  //24

Таким образом, если вы создаёте методы или свойства для прототипа, все эти методы и свойства наследуются объектами, связанными с этим прототипом.

Эта статья - лишь краткое знакомство с ООП в JavaScript. Если хотите знать больше, то вам сюда:

>>> JavaScript, jQuery и Ajax с нуля до гуру >>>


Что такое JavaScript Что такое JavaScript

Небольшая книга о JavaScript, которая поможет вам в изучении JavaScript. В книге и рассылке сведения для начинающих: что такое JavaScript, как это работает, письма, которые помогут принять решение, надо ли вам это или нет, а также полезные ссылки на обучающие материалы. Подробнее...
Инфо-МАСТЕР ®
Все права защищены ©
e-mail: mail@info-master.su

Яндекс.Метрика