Объекты, методы и свойства

В этой главе:

1. Объекты и прототипы
2. Объекты и их свойства
3. Создание новых объектов
4. Методы объектов
5. Некоторые методы объектов window и document

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

Объекты и прототипы

Как уже отмечалось, JavaScript, в отличие от таких языков, как Java или C++, не является объектно-ориентированным языком программирования. В частности, JavaScript не поддерживает иерархическую структуру наследования, т.е. вы не можете определить объект (или класс, как это принято в терминологии ООП), порожденный на основе иного объекта.

ПРИМЕЧАНИЕ
Если вы никогда не занимались объектно-ориентированным программированием, то можете пропустить нижеизложенное сравнение Java и JavaScript. Но оно может вам пригодиться для лучшего понимания модели прототипов JavaScript, если вы знакомы с объектной моделью более мощных языков программирования.

Чтобы лучше разобраться в отличиях истинной объектной модели от модели, принятой в JavaScript, сопоставим два этих подхода на примере реализации объектов в Java и в JavaScript. Для этого создадим простой класс Automobile, имеющий такие характерные для любой машины свойства, как модель и производитель. На языке Java это будет выглядеть таким образом:

public class Automobile { public String vendor; // производитель public String model; // модель public Automobile() { this.vendor = ""; this.model = ""; } }

Теперь, используя типичную для ООП иерархическую модель наследования, на языке Java можно создать дочерние объекты (классы), например, для таких типов машин, как самосвал и автобус:

public class Lorry extends Automobile { public int carrying_tons; // грузоподъемность в тоннах public Lorry() { this.carrying_tons = 0; } } public class Bus extends Automobile { public int passenger_capacity; // число пассажирских мест public Bus() { this.passenger_capacity = 0; } }

При этом объекты Bus и Lorry наследуют все свойства от родительского объекта Automobile. В данном случае они получат в наследство свойства vendor и model. Обратите внимание на то, что при определении классов Java требуется всякий раз определять метод, по названию совпадающий с названием класса. Этот метод называется конструктором, и вызывается автоматически при создании новой копии объекта. Отметим, что в объектно-ориентированных языках объект сначала должен быть определен, а затем – создан путем вызова конструктора.

Теперь попытаемся решить ту же задачу в JavaScript. Поскольку в нем само определение объекта является конструктором, то конструкция, описывающая объект «автомобиль», на JavaScript будет выглядеть таким образом:

function Automobile() { this.vendor = ""; // производитель this.model = ""; // модель }

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

Далее, создадим дочерние объекты, наследующие свойства класса Automobile:

function Lorry() { this.carrying_tons = 0; } Lorry.prototype = new Automobile; function Bus() { this.passenger_capacity = 0; } Bus.prototype = new Automobile;

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

Модель прототипов, принятая в JavaScript, проще с точки зрения программирования, однако ей присущи некоторые недостатки, в частности, невозможно создавать защищенные или скрытые свойства. Другое дело, что для той категории задач, для которой применяется JavaScript, такой упрощенной модели вполне достаточно.

Объекты и их свойства

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

ИмяОбъекта.Свойство

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

var MyTrack = new Lorry; //создаем экземпляр на основе объекта Lorry MyTrack.vendor = "КамАЗ"; //определяем значение свойства vendor MyTrack.model = "6520"; //определяем значение свойства model MyTrack.carrying_tons = 20; //определяем значение свойства carrying_tons

Поскольку переменная MyTrack является полноценным объектом, то можно использовать оператор with для того, чтобы сделать запись более компактной:

with (MyTrack) { vendor = "КамАЗ"; model = "6520"; carrying_tons = 20; };

Оба варианта записи полностью идентичны, однако в JavaScript предусмотрен еще один способ обращения к свойствам объекта – через ассоциированный массив. Таким образом, выполнить то же самое, что и выше можно следующим способом:

MyTrack["vendor"] = "КамАЗ"; MyTrack["model"] = "6520"; MyTrack["carrying_tons"] = 20;

Теперь, когда мы разобрались с присваиванием значений свойствам объектов, давайте создадим функцию, которая будет возвращать все свойства объекта вместе с их значениями. Для этого нам потребуется оператор for-in, с помощью которого можно организовать цикл, перебирающий все свойства объекта. В результате мы получим примерно такую функцию:

function show_props(obj) { var result = ""; for (var i in obj) { result += i + " = " + obj[i] + "\n"; }; return result; }

Результатом работы такой функции будет вывод всех свойств объекта со значениями:

carrying_tons = 20 vendor = КамАЗ model = 6520

Результат выглядел бы лучше, если бы названию каждого свойства предшествовало название самого объекта. Для этого можно несколько модернизировать функцию таким образом, чтобы она в качестве второго аргумента получала имя объекта:

function show_props(obj, obj_name)

Теперь этот аргумент надо задействовать. Для этого сделаем изменения в строке, «собирающей» результат:

result += obj_name + "." + i + " = " + obj[i] + "\n";

Если теперь вызвать такую функцию, использовав ее в качестве аргумента для метода document.write, выводящего текст непосредственно в HTML-документ, то в окне браузера можно будет увидеть примерно следующее:

MyTrack.carrying_tons = 20 MyTrack.vendor = КамАЗ MyTrack.model = 6520

Полный пример можно посмотреть в файле objects\automobile.html.

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

Для создания новых объектов в JavaScript предусмотрены два основных способа. Выше уже рассматривался классический способ – сначала определяется функция-конструктор, а затем создается экземпляр объекта при помощи оператора new. Следует отметить, что если для конструктора указать параметры, то при создании экземпляра можно будет сразу присваивать значения свойствам. Чтобы проиллюстрировать такой подход, создадим новый объект car со свойствами vendor, model и year:

function car(vendor, model, year) { this.vendor = vendor; this.model = model; this.year = year; }

Таким образом, уже в момент создания нового экземпляра объекта типа car можно сразу же указывать значения для всех его свойств:

var MyCar = new car("Ford", "Escort", 1997);

Альтернативный способ создания объектов, впервые появившийся в JavaScript 1.2, заключается в использовании инициализатора объекта. При этом сразу задается как объект, так и значения. Для этого используется следующий синтаксис:

ИмяОбъекта = { Свойство1: Значение1, Свойство2: Значение2, ..., СвойствоN: ЗначениеN }

Таким образом, наш объект, описывающий автомобиль, можно написать так:

MyCar = {vendor: "Ford", model: "Escort", year: 1997};

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

Наконец, остается рассмотреть еще один аспект создания объектов, касающийся того, какими могут быть его свойства. В предыдущих примерах мы использовали только простые типы данных – такие, как строки или числа. Но, на самом деле, свойством объекта может быть другой объект. Например, к описанию машины можно добавить такое свойство, как двигатель. В свою очередь, двигатель может иметь такие свойства, как объем и количество цилиндров. Таким образом, используя классический подход, определим сначала объект-двигатель, а затем объект – машину:

function engine(volume, cylinders) { this.volume = volume; this.cylinders = cylinders; } function car(vendor, model, year, engine) { this.vendor = vendor; this.model = model; this.year = year; this.engine = engine; }

Теперь попробуем создать такой объект и присвоить значения всем его свойствам. Если с первыми тремя свойствами вопросов не возникает, то как быть с последним, являющимся объектом? Прежде всего, нам потребуется создать экземпляр такого объекта, и только когда он уже определен, можно создать экземпляр объекта car:

var MyEngine = new engine(1.3, 4); var MyCar = new car("Ford", "Escort", 1997, MyEngine);

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

MyCar = { vendor: "Ford", model: "Escort", year: 1997, engine { volume: 1.3, cylinders: 4 } };

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

MyCar.engine.volume = 1.3; MyCar.engine.cylinders = 4;

Если бы одним из свойств объекта engine так же был объект, то пришлось бы использовать точку трижды, и т.д. Пример можно посмотреть в файле car_object.html.

Методы объектов

Объекты JavaScript могут иметь не только свойства, но и методы. Методами объекта называют процедуры и функции, которые привязаны к данному объекту и могут быть использованы только в контексте взаимодействия с ним.

Чтобы создать метод, следует, прежде всего, написать функцию, которая будет его реализовывать, а затем указать его в конструкторе объекта. Допустим, нам не помешает функция, которая выводит в виде таблице все свойства автомобиля (вернее, объекта car). В таком случае сначала напишем такую функцию:

function displayCar() { var str = "<table border=\"1\">"; str += "<tr><td>Производитель:</td><td>"+this.make+"</td></tr>"; str += "<tr><td>Модель:</td><td>"+this.model+"</td></tr>"; str += "<tr><td>Год выпуска:</td><td>"+this.year+"</td></tr>"; str += "<tr><td>Двигатель:</td><td>"+this.engine.cylinders+"-цилиндровый, "+this.engine.volume+"л.</td></tr>"; str += "</table>"; document.write(str); }

Данная функция сначала создает строковую переменную str, в которую вносит все свойства объекта вместе с HTML-разметкой, а затем выводит эту строку в окно браузера. Обратите внимание, что к свойствам объекта функция обращается при помощи указателя this – такой синтаксис подразумевает, что данная функция будет методом объекта.

Теперь, когда у нас имеется функция, остается определить метод в самом объекте. Для этого достаточно добавить название функции к его описанию:

function car(vendor, model, year, engine) { this.vendor = vendor; this.model = model; this.year = year; this.engine = engine; this.displayCar = displayCar; }

Теперь, создав объект типа car, можно просто воспользоваться его собственным методом для того, чтобы вывести все параметры в виде таблицы:

var MyCar = new car("Ford", "Escort", 1997, new engine(1.3, 4)); MyCar.displayCar();

Результатом обращения к этому методу будет таблица с параметрами автомобиля (см. рис. 4.3). Здесь же хотелось бы отметить тот факт, что свойство-объект engine было создано и проинициализировано непосредственно при создании экземпляра объекта car – правила синтаксиса JavaScript позволяют создавать объекты и таким способом.

Рис. 4.3. Результат работы метода displayCar() объекта car

Полностью пример с работающим методом displayCar(), причем сразу для нескольких объектов типа car можно посмотреть в файле methods.html.

Некоторые методы объектов window и document

Все приведенные до этого момента примеры (в этой части книги) страдают одним и тем же недостатком: они не интерактивны! Иначе говоря, вы можете лишь видеть результат их работы, который от вас никак не зависит, а чтобы что-то изменить, приходится менять исходный код сценария. Поэтому, чтобы разнообразить примеры и сделать их интереснее, ознакомимся с некоторыми методами, предопределенными в браузере для сценариев JavaScript.

Прежде всего, это методы alert, prompt и confirm, принадлежащие объекту window, причем с методом alert, вызывающим модальное диалоговое окно с текстом, мы уже знакомы:

alert("Всем привет!");

Оставшиеся 2 метода так же создают модальные диалоговые окна, однако они отличаются тем, что ожидают от пользователя какого-либо определенного действия. Так, метод confirm позволяет выбрать один из двух вариантов ответа:

confirm("Вы согласны?");

В результате выполнения такой команды браузер покажет окно с указанным текстом и предлагающее сделать выбор в пользу одного из 2 вариантов ответа (рис. 4.4).

Рис. 4.4. Выбор из двух вариантов ответа – первый шаг к интерактивности

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

if (confirm("Ввывести информацию о машине?")) MyCar.displayCar(); else alert("Сам отказался!");

Теперь в начале загрузки документа будет показано диалоговое окно с указанным нами вопросом и кнопками «ОК» и «Отмена». Если нажать ОК, то будет выведена таблица с характеристиками автомобиля, в противном случае покажется новое окно со словами «Сам отказался!».

Еще более интересным является метод prompt, который позволяет пользователю ввести свои значения в качестве ответов на задаваемые при помощи этого метода вопросы. Например, можно спросить у пользователя, как его зовут:

var Name = prompt("Как вас зовут?");

Результатом выполнения этой функции будет окно, содержащее текст вопроса и строку для ответа (рис. 4.5). То, что возвращаемое этим методом значение так же надо как-то использовать (например, присвоив переменной Name), не должно вызывать вопросов, ведь метод prompt, как и confirm, является функцией, возвращающей значение.

Рис. 4.5. Диалоговое окно, вызываемое методом prompt

Поскольку в окне запроса, вызываемым методом prompt, так же имеется 2 кнопки, то следует учитывать, что если пользователь вместо того, чтобы ввести текст и нажать ОК, нажмет «Отмену», возвращаемым значением будет null. Если же пользователь нажмет ОК, оставив поле пустым, то возвращаемым значением будет пустая строка. Но в отличие от alert и confirm, для метода prompt, на самом деле, предусмотрен еще один параметр, который определяет ответ на вопрос по умолчанию. Например, можно указать какое-либо обобщающее имя в качестве универсального ответа:

var Name = prompt("Как вас зовут?", "Странник");

ПРИМЕЧАНИЕ
Браузер MSIE при вызове метода prompt без дополнительного параметра в качестве значения по умолчанию подставляет строку undefined. Поэтому, чтобы не вводить пользователя в замешательство и не заставлять его стирать эту надпись, всегда используйте дополнительный параметр, хотя бы указывая пустую строку в качестве его значения.

С использованием метода prompt можно сделать пример с классом автомобиля более интересным, предоставив возможность ввести (или отредактировать) параметры машины путем последовательного вывода нескольких окон с запросами. Модернизированный таким образом пример вы можете посмотреть в файле confirm.html.

Для создания немодальных окон (т.е. обычных окон браузера, способных отображать содержимое HTML-документов), используется метод open:

window.open(АдресДокумента, ИмяОкна [,ПараметрыОкна])

В качестве первого параметра (адреса) указывают URL документа, который надо загрузить в создаваемое окно. Этот метод возвращает идентификатор окна, который в дальнейшем можно использовать для того, чтобы к нему обращаться:

var NewWindow = window.open("readme.html", "readme"); NewWindow.close();

Здесь создается новое окно браузера, в которое загружается файл readme.html, сразу после чего оно закрывается при помощи другого метода – close.

В качестве параметров окна можно указывать его размеры, а так же задавать наличие или отсутствие элементов управления (в частности, панели инструментов). Например, чтобы создать окно шириной 400 и высотой 300 пикселей, и при этом не имеющее панели инструментов, следует вызвать метод open со следующими параметрами:

var NewWindow = window.open("", "", "toolbar=0,height=300,width=400");

В данном случае функции передается строка, которую она может интерпретировать. В частности, значение toolbar=0 указывает на то, что никаких панелей инструментов создавать не требуется, а height=300 и width=400 определяют размеры окна в высоту и в ширину. Поскольку в данном случае мы не указали адреса документа, то будет открыто пустое окно.

Если объект window отвечает за окно браузера, то объект document ссылается непосредственно за его содержимое. Так, для объекта document тоже существует метод open, но он не создает новое окно, а загружает документ в имеющееся:

document.open("readme.html");

В результате выполнения этого кода в текущее окно браузера будет загружен файл readme.html. Если же в качестве параметра для метода open не указывать адреса файла для загрузки, то документ будет открыт для записи при помощи методов write или writeln. Они используются для того, чтобы вывести в текущий документ какой-либо текст:

document.write("Текст, который будет записан в документ"); document.writeln("Текст, который тоже будет записан в документ");

Различие между write() и writeln() состоит только в том, что последний добавляет в конец символ «перенос строки» (\n). По завершению вывода текста в документ полезно воспользоваться методом close:

document.colse();

На практике объекты window и document часто используются совместно. Например, при помощи метода open объекта window создается новое окно, а затем, методом open уже объекта document в него либо загружают новый файл, либо подготавливают к выводу текста средствами JavaScript. Рассмотрим такой случай на следующем примере:

var NewWindow = window.open('', '', 'toolbar=0,height=300,width=400'); with (NewWindow) { document.open(); document.writeln('Текст'); document.close(); }

Здесь мы, прежде всего, создаем новое окно (NewWindow). Изначально оно будет пустым, однако мы вполне можем вывести в него какой-либо текст, открыв его для записи и воспользовавшись методом writeln.

Более полный пример, иллюстрирующий работу методов document и window, можно найти в файле window.html.

2011-07-29 // Есть вопросы, предложения, замечания? Вы можете обсудить это на форуме !

« Функции JavaScript | Предопределенные объекты языка JavaScript »