Начало работы с объектно-ориентированным кодом JavaScript

Как создавать объекты с помощью языка JavaScript

В этой статье объясняются все возможные способы создания специальных объектов с помощью языка JavaScript и приводятся примеры кода, демонстрирующие, как эти объекты можно использовать в реальной ситуации.

Крис Хэдлок, Web-разработчик/дизайнер, Studio Sedition

Фото Криса ХэдлокаКрис Хэдлок (Kris Hadlock) занимается разработкой и Web-дизайном по контрактам с 1996 года. Работал над проектами для таких компаний, как SPIN Magazine, IKEA, United Airlines, JP Morgan Chase, GoDaddy Software и Fire Mountain Gems. Автор книг Ajax for Web Application Developers (издательство Sams) и The ActionScript Migration Guide (издательство New Riders), а также журналист и писатель, публиковавшийся на многочисленных Web-сайтах и в журналах по дизайну, в том числе Peachpit.com, InformIT.com и Practical Web Design. Крис – основатель студии Web-дизайна и разработки программного обеспечения www.studiosedition.com, специализирующейся в области синтеза формы и функциональности.



23.01.2012

В языке JavaScript есть несколько встроенных объектов, таких как Array, String, Date и др. Но, если нужно создать специальные функции, то можно с помощью одного из имеющихся методов написать собственные специальные объекты. Разработка специальных объектов с помощью языка JavaScript дает много преимуществ, одно из которых – простая возможность многократно использовать эти объекты в разных проектах без всяких изменений. Кроме того, специальные объекты предоставляют доступ к функциям, выходящим за рамки набора готовых объектов языка JavaScript. Их можно использовать в сочетании с другими специальными объектами для построения библиотеки, которая будет полезна и другим Web-разработчикам.

Функциональными и полезными объекты делают свойства и методы. Самый простой способ понять идею объекта ― подумать о каком-нибудь реальном объекте. Например, в качестве объекта можно использовать свою собаку. У нее есть свойства, такие как ноги, уши, хвост, возможно, ошейник, и т.п. У собаки есть методы, такие как лай, еда, сон и т.п. Методы могут изменять свойства собаки. К примеру, когда собака лает, она может поднимать уши, а когда спит, они будут висеть (конечно, если это не немецкий дог). Представьте себе, что в вашем проекте нужно использовать объект "собака". Если нужно создать несколько таких объектов, то можно сэкономить много времени, так как все они будут иметь много общих основных свойств и методов. А если собака понадобится в другом проекте, то можно будет легко воспользоваться готовым объектом.

Ниже приведены различные способы создания специального объекта с помощью языка JavaScript:

  • функция Object,
  • литеральное обозначение,
  • конструктор и прототипирование объектов.

Эта статья охватывает все три способа создания специальных объектов средствами языка JavaScript в ходе демонстрации процесса создания простого объекта фотогалереи с помощью каждого из них.

Чтобы приступить к работе с этой статьей, необходимо иметь общее представление о языке JavaScript. Следуйте примерам, загрузив код примеров из раздела Загрузка. Чтобы ближе познакомиться с основами языка JavaScript, посетите статьи по ссылкам из раздела Ресурсы.

Функция Object

Функция Object - один из простейших способов создания объекта на языке JavaScript. Язык JavaScript содержит функцию с именем Object, которая создает объект при ее использовании с оператором new. Функция Object является отправной точкой для любых специальных возможностей, которых можно достичь путем создания объекта. Чтобы сослаться на объект, созданный с помощью оператора new и функции Object, достаточно присвоить ему переменное имя (листинг 1).

Листинг 1. Создание специального объекта с помощью объекта функции Object
var Gallery = new Object();

Чтобы объект Gallery был полезным, можно придать ему функциональность, добавив свойства и методы. Листинг 2 содержит три свойства и три метода, добавленных к объекту Gallery.

Листинг 2. Специальный объект Gallery со свойствами и методами.
var Gallery = new Object();
window.onload= function()
{
    Gallery.Images = ['istockphoto_14149033.jpg', 'istockphoto_14232771.jpg', 
'istockphoto_14667148.jpg'];
    Gallery.CurrentIndex = 0;
    Gallery._loopInterval = setInterval(Gallery.Next, 2500);
};

Gallery.Next = function()
{
    if(Gallery.CurrentIndex < (Gallery.Images.length-1))
    {
        Gallery.CurrentIndex++;
    }
    else
    {
        Gallery.CurrentIndex = 0;
    }
    Gallery.Display();
};

Gallery.Prev = function()
{
    if(Gallery.CurrentIndex > 0)
    {
        Gallery.CurrentIndex--;
    }
    else
    {
        Gallery.CurrentIndex = (Gallery.Images.length-1);
    }
    Gallery.Display();
};

Gallery.Display = function()
{
    var photoGallery = document.getElementById('photo-gallery');
    var currentImage = Gallery.Images[Gallery.CurrentIndex];
    photoGallery.src = "../assets/img/"+currentImage;
};

Число в свойстве _loopInterval

Число в свойстве _loopInterval можно изменить, чтобы увеличить или уменьшить время появления каждого изображения.

Свойства объекта Gallery - это CurrentIndex, Images и _loopInterval. Чтобы определить их как свойства объекта Gallery, достаточно назначить их объекту Gallery, используя синтаксис с точкой — добавить точку и имя переменной, а затем присвоить этой переменной значение. Методы, используемые в листинге 2, это Next, Prev и Display. Чтобы определить их как методы объекта Gallery, используйте синтаксис с точкой и назначьте каждому из них собственную функцию.

Методы Next и Prev используют свойства этого объекта. Свойство CurrentIndex определяет, что текущий индекс массива Images таков, что если увеличить или уменьшить его, он будет указывать на другой элемент массива. Свойство Images — это массив, который хранит изображения галереи. Свойство _loopInterval автоматически перебирает изображения галереи каждые 2,5 секунды.

Пример кода HTML, используемого в статье

Во всех других примерах из этой статьи используется HTML-файл, приведенный в листинге 4. Объект Gallery ― единственное, что изменяется в зависимости от способа создания объекта.

Методы Next and Prev в объекте Gallery сходны — первый увеличивает текущий индекс в массиве Images, а последний уменьшает его, что приводит к отображению другой фотографии каждый раз, когда вызывается метод Display.

Для вызова одного из методов этого объекта, такого как метод Next, достаточно сослаться на объект Gallery с точкой, за которой следует имя метода (Next) и, наконец, открывающая и закрывающая скобки (листинг 3).

Листинг 3. Вызов метода Next в специальном объекте Gallery
Gallery.Next();

Чтобы привести этот объект в действие, достаточно создать элементы управления, перемещающие изображения в массиве Images. Во-первых, необходимо включить файл JavaScript, который в данном случае представляет собой внешний файл с именем Gallery.js. Затем просто добавьте HTML-тег img, который отображает изображения и добавляет гиперссылки, управляющие навигацией (листинг 4).

Листинг 4. Пример HTML-файла со специальным объектом Объект Gallery и функции Gallery
<html>  
<head>  
<title>Начало работы с объектно-ориентированным языком JavaScript</title>  
<script type="text/javascript" src="js/Gallery.js"></script>  
</head>   
<body>   
<img src="../assets/img/istockphoto_14149033.jpg" id="photo-gallery" />  
<p>   
<a href="#" onclick="Gallery.Prev();">&lt; Previous</a>   
&nbsp;  
<a href="#" onclick="Gallery.Next();">Next &gt;</a>  </p>   
</body>  
</html>

Литеральное обозначение

Еще один способ создания объектов в языке JavaScript ― это литеральные обозначения, которые поддерживаются в версиях JavaScript 1.2 и выше. Литеральные обозначения могут содержать свойства и методы, так же как и объекты, созданные с помощью функции Object.

Создание специальных объектов JavaScript с помощью литеральных обозначений аналогично созданию ассоциативного массива в других языках программирования. Для создания объекта с помощью литерального обозначения достаточно присвоить переменную открывающей и закрывающей фигурным скобкам, как показано в листинге 5.

Листинг 5. Создание специального объекта с помощью литерального обозначения
var Gallery = {};

Чтобы определить свойства объекта, созданного с помощью литеральных обозначений, необходимо использовать двоеточие между именем переменной и значением и разделять все свойства запятыми, как показано в листинге 6.

Листинг 6. Добавление свойств специального объекта с помощью литеральных обозначений
var Gallery = {
  Images: ['istockphoto_14149033.jpg', 'istockphoto_14232771.jpg', 
           'istockphoto_14667148.jpg'],
  CurrentIndex: 0
};

Определение методов объекта, созданного с помощью литеральных обозначений, аналогично способу определения свойств. Метод создается путем указания имени переменной, за которым следует двоеточие, а за ним функция. Если нужно определить несколько методов объекта, они разделяются запятыми (листинг 7).

Листинг 7. Добавление методов к специальному объекту с помощью литеральных обозначений
var Gallery = {
    Images: ['istockphoto_14149033.jpg', 'istockphoto_14232771.jpg', 
'istockphoto_14667148.jpg'],
    CurrentIndex: 0,
    Next: function()
    {
        if(Gallery.CurrentIndex < (Gallery.Images.length-1))
        {
            Gallery.CurrentIndex++;
        }
        else
        {
            Gallery.CurrentIndex = 0;
        }
        Gallery.Display();
    }
};

Еще одно различие между использованием функции Object и литеральными обозначениями заключается в том, что не нужно определять свойства и методы, используя имя объекта перед каждым из них. В листинге 8 приведен полный пример объекта Gallery с использованием литеральных обозначений.

Листинг 8. Специальный объект Gallery с литеральными обозначениями
var Gallery = {
    Images: ['istockphoto_14149033.jpg', 'istockphoto_14232771.jpg', 
'istockphoto_14667148.jpg'],
    CurrentIndex: 0,
    Next: function()
    {
        if(Gallery.CurrentIndex < (Gallery.Images.length-1))
        {
            Gallery.CurrentIndex++;
        }
        else
        {
            Gallery.CurrentIndex = 0;
        }
        Gallery.Display();
    },
    Prev: function()
    {
        if(Gallery.CurrentIndex > 0)
        {
            Gallery.CurrentIndex--;
        }
        else
        {
            Gallery.CurrentIndex = (Gallery.Images.length-1);
        }
        Gallery.Display();
    },
    Display: function()
    {
        var photoGallery = document.getElementById('photo-gallery');
        var currentImage = Gallery.Images[Gallery.CurrentIndex];
        photoGallery.src = "../assets/img/"+ currentImage;
    }
};
window.onload = function()
{
    var _loopInterval = setInterval(Gallery.Next, 2500);
};

Чтобы использовать этот объект, его можно включить в HTML-файл из листинга 4. Остальная часть кода, в том числе вызовы функций, остается неизменной.

Единственный недостаток объектов, использующих функцию Object или литеральные обозначения, ― невозможность создавать их экземпляры. Например, оператор new с объектами этих двух типов можно использовать только при создании объекта, так что объект нельзя использовать повторно, чтобы создать другой экземпляр. В примере из этой статьи, если нужно создать несколько галерей в одном HTML-файле, JavaScript-файл придется включить несколько раз, и каждый раз давать галерее другое имя, что ведет к множеству дублирующих объектов с разными именами. Так что объекты этих типов не подходят для подобных ситуаций. Но если объект нужно использовать только один раз, эти типы объектов работают хорошо. Чтобы создать объект, который можно использовать несколько раз, потребуются конструктор объектов и прототипирование.


Конструктор объектов и прототипирование

Когда нужно создать объект, который можно использовать несколько раз, требуются конструктор объектов и прототипирование. Конструктор объектов аналогичен любой другой функции, но при именовании функции вы фактически присваиваете функции имя объекта, в котором она создается. В данном случае имя объекта — Gallery. Однако так как нужно иметь возможность создавать несколько экземпляров галерей, для этого примера я назвал его GalleryObj.

Когда в конструктор объектов добавляют свойства и методы, он начинает дифференцироваться. Лично я не добавляю методы к своим конструкторам, потому что это плохая идея, но это возможно. При добавлении свойства или метода к конструктору объектов для их назначения этому объекту перед именем свойства или метода используется ключевое слово (листинг 9).

Листинг 9. Определение свойств в конструкторе объектов
function GalleryObj()
{
    this.Images = ['istockphoto_14149033.jpg', 'istockphoto_14232771.jpg', 
'istockphoto_14667148.jpg'];
    this.CurrentIndex = 0;
    this._loopInterval = setInterval(this.Next, 2500);
}

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

Листинг 10. Добавление методов к объекту с помощью ключевого слова prototype
GalleryObj.prototype.Next = function()
{
    if(Gallery.CurrentIndex < (Gallery.Images.length-1))
    {
        Gallery.CurrentIndex++;
    }
    else
    {
        Gallery.CurrentIndex = 0;
    }
    Gallery.Display();
};

В листинге 11 приведен полный пример Gallery с использованием функции конструктора и прототипирования.

Листинг 11. Специальный объект GalleryObj, использующий конструктор объектов и прототипирование
function GalleryObj()
{
    this.Images = ['istockphoto_14149033.jpg', 'istockphoto_14232771.jpg', 
'istockphoto_14667148.jpg'];
    this.CurrentIndex = 0;
    this._loopInterval = setInterval(this.Next, 2500);
}

GalleryObj.prototype.Next = function()
{
    if(Gallery.CurrentIndex < (Gallery.Images.length-1))
    {
        Gallery.CurrentIndex++;
    }
    else
    {
        Gallery.CurrentIndex = 0;
    }
    Gallery.Display();
};

GalleryObj.prototype.Prev = function()
{
    if(Gallery.CurrentIndex > 0)
    {
        Gallery.CurrentIndex--;
    }
    else
    {
        Gallery.CurrentIndex = (Gallery.Images.length-1);
    }
    Gallery.Display();
};

GalleryObj.prototype.Display = function()
{
    var photoGallery = document.getElementById('photo-gallery');
    var currentImage = Gallery.Images[Gallery.CurrentIndex];
    photoGallery.src = "../assets/img/"+ currentImage;
};

var Gallery = new GalleryObj();

Чтобы использовать один и тот же HTML-файл, я назвал объект GalleryObj, так что при создании экземпляра можно дать ему имя Gallery. Другая особенность заключается в том, что интервал автоматической смены фотографий в галерее теперь определяется для каждого экземпляра, а не при определении объекта. Это позволяет управлять интервалом для каждого экземпляра галереи отдельно.

Теперь, чтобы создать еще один экземпляр объекта GalleryObj, достаточно просто определить новый, как показано в листинге 12.

Листинг 12. Создание другого экземпляра специального объекта GalleryObj
var Gallery2 = new GalleryObj();

Как видите, конструктор объектов - довольно мощный инструмент в том плане, что он позволяет создавать неограниченное количество экземпляров объекта. А функция прототипирования позволяет добавлять методы, доступные для всех экземпляров этого объекта.


Прототипирование основных объектов JavaScript

Теперь, когда вы освоили прототипирование, можно перейти к добавлению специальных методов к основным объектам JavaScript. Иногда требуется дополнительная функциональность, но не обязательно специальный объект. Допустим, например, что нужно получить индекс конкретного элемента массива Images. Вместо того чтобы писать произвольную одноразовую функцию, можно расширить объект Array с помощью ключевого слова prototype, добавив новый метод в объект (листинг 13).

Листинг 13. Использование ключевого слова prototype для добавления метода к основному объекту Array на языке JavaScript
Array.prototype.GetIndex = function(item)
{
	for(var i=0; i<this.length; i++)
	{
		if(this[i] == item)
            {
                return i;
            }
	}
}

Чтобы использовать новый метод, добавленный в объект Array, можно просто вызвать его, как любую другую функцию любого созданного массива. В листинге 14 содержится массив Images с именем GetIndex, который возвращает индекс конкретного изображения из массива.

Листинг 14. Использование ключевого слова prototype для добавления метода к основному объекту Array
<html>
<head>
<title>Getting Started with Object-Oriented JavaScript</title>
<script type="text/javascript" src="js/Array.js"></script>
<script type="text/javascript">
var Images = ['istockphoto_14149033.jpg', 'istockphoto_14232771.jpg', 
'istockphoto_14667148.jpg'];
var index = Images.GetIndex('istockphoto_14232771.jpg');
alert("Index: "+ index);
</script>
</head>

<body>
</body>
</html>

Расширение основных объектов в языке JavaScript позволяет добавлять функции к уже существующим объектам. Так что для того чтобы получить возможность многократно использовать расширенную функциональность в любом из своих проектов, достаточно просто приказать объекту Array делать что-то еще.


Заключение

Каждый из вариантов, рассмотренных в этой статье, по-своему хорош. Функция Object и литеральное обозначение схожи, и выбор зависит от предпочтения разработчика. Оба эти способа хороши для объектов, которые не нужно тиражировать. Если же надо создать объект, который можно будет использовать несколько раз, потребуются конструктор объекта и прототипирование.

Создание специальных объектов на языке JavaScript позволяет строить сложные функции, сохраняя код прозрачным и организованным. Я надеюсь, что эта статья вдохновила вас на использование специальных объектов в своих проектах JavaScript для создания сложной и полезной интерактивной функциональности.


Загрузка

ОписаниеИмяРазмер
Пример кода для этой статьиoojs.zip197 КБ

Ресурсы

Научиться

Получить продукты и технологии

  • Тем, кто достиг глубокого понимания языка JavaScript, библиотека jQuery поможет ускорить процесс разработки.

Комментарии

developerWorks: Войти

Обязательные поля отмечены звездочкой (*).


Нужен IBM ID?
Забыли Ваш IBM ID?


Забыли Ваш пароль?
Изменить пароль

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Профиль создается, когда вы первый раз заходите в developerWorks. Информация в вашем профиле (имя, страна / регион, название компании) отображается для всех пользователей и будет сопровождать любой опубликованный вами контент пока вы специально не укажите скрыть название вашей компании. Вы можете обновить ваш IBM аккаунт в любое время.

Вся введенная информация защищена.

Выберите имя, которое будет отображаться на экране



При первом входе в developerWorks для Вас будет создан профиль и Вам нужно будет выбрать Отображаемое имя. Оно будет выводиться рядом с контентом, опубликованным Вами в developerWorks.

Отображаемое имя должно иметь длину от 3 символов до 31 символа. Ваше Имя в системе должно быть уникальным. В качестве имени по соображениям приватности нельзя использовать контактный e-mail.

Обязательные поля отмечены звездочкой (*).

(Отображаемое имя должно иметь длину от 3 символов до 31 символа.)

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Вся введенная информация защищена.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=40
Zone=Web-архитектура
ArticleID=788643
ArticleTitle=Начало работы с объектно-ориентированным кодом JavaScript
publish-date=01232012