вызове horse.speak() this означает объект horse, а при вызове
pig.speak() — объект pig.
Чтобы использовать один и тот же код
метода с разными объектами, достаточно
добавить его в виде свойства каждому из этих
объектов — это мы и сделали сейчас с функ-
цией speak. Однако если в программе много
объектов и методов, добавление методов
вручную будет задачей весьма утомительной,
а код при этом станет запутанным и неакку-
ратным. Только представьте, что вам нужен
целый зоопарк объектов для сотни разных
животных и вы хотите, чтобы у них всех было
с десяток общих методов и свойств.
Конструкторы объектов позволяют зада-
вать общие методы и свойства куда более
удобным способом, и сейчас мы в этом
убедимся.
12. Объектно-ориентированное программирование 179
Создание объектов с помощью конструкторов
В JavaScript конструктор — это функция, которая создает объекты,
давая им набор заранее определенных свойств и методов. Представьте
себе, что это машина по созданию объектов, вроде фабрики, которая
штампует тысячи копий одного и того же товара. Задав конструктор, вы
сможете создавать с его помощью любое количество одинаковых объ-
ектов. Чтобы опробовать этот подход в деле, мы напишем основу игры
«гонки», где используем конструктор для создания парка машин с оди-
наковыми базовыми свойствами, а также методами для перемещения
в разные стороны и изменения скорости.
Устройство конструктора
При каждом вызове конструктор создает объект, добавляя ему нужные
свойства. Если для вызова обычной функции мы указывали ее имя и сле-
дом круглые скобки, то для вызова конструктора используется ключевое
New — новый
слово new (которое сообщает JavaScript, что вы собираетесь использо-
вать функцию как конструктор), а следом — имя конструктора и скобки.
На рис. 12.1 показан синтаксис вызова конструктора.
Аргументы,
В этой переменной
передаваемые
будет сохранен
конструктору
новый объект
var car = new Car(100, 200)
Имя конструктора
Рис. 12.1. Синтаксис вызова конструктора с именем Car и двумя аргументами
! Большинство JavaScript-программистов называют конструкторы
с заглавной буквы, чтобы отличать их от обычных функций.
Создаем конструктор Car
Car —
Давайте создадим конструктор Car, который будет добавлять к каждому
машина
созданному объекту свойства x и y. Мы будем использовать эти
свойства как координаты, задающие позицию машины на экране при
отображении.
Создаем HTML-документ
Прежде чем писать код конструктора, нам нужно создать новый HTML-
документ. Создайте новый файл под именем cars.html и введите в него
следующий HTML-код:
180 Часть II. Продвинутый JavaScript
Функция-конструктор Car
Теперь введите следующий код между тегов
Наш новый конструктор принимает два аргумента, xиy, и добавляет
новому объекту свойства this.x и this.y, сохраняя в них переданные
значения x и y. Таким образом, каждый раз при вызове конструктора
Car будет создан новый объект со свойствами x и y, значения которых
соответствуют переданным аргументам.
Вызов конструктора Car
Как я уже говорил, ключевое слово new указывает JavaScript, что мы
вызываем конструктор для создания нового объекта. Например, чтобы
создать объект-машину с именем tesla, откройте файл cars.html
в браузере и введите в JavaScript-консоли Chrome такой код:
var tesla = new Car(10, 20);
tesla;
Car {x: 10, y: 20}
12. Объектно-ориентированное программирование 181
Код Car(10, 20) указывает JavaScript, что нужно создать объект,
используя функцию Car в качестве конструктора и передав ей аргу-
менты 10 и 20 для свойствx иy, и затем вернуть этот объект. Полученный
новый объект мы сохраняем в переменной tesla.
Далее, когда мы ввели tesla, консоль Chrome напечатала имя кон-
структора и свойства x и y: Car {x: 10, y: 20}.
Рисуем машины
Для отображения объектов, созданных конструктором Car, создадим
Draw car —
функцию под названием drawCar — она будет помещать изображение
нарисовать
машины в позицию ( x, y), соответствующую свойствам x и y каждого
машину
нашего объекта. Разобравшись, как эта функция работает, мы перепи-
шем ее в объектно-ориентированном виде — см. раздел «Добавляем
метод draw к прототипу Car» на с. 185. Введите этот код между тегов
добавить
182 Часть II. Продвинутый JavaScript
В строке мы создали строку с HTML-кодом, содержащим ссылку
на изображение машины (чтобы использовать двойные кавычки в HTML-
коде, при создании строки поставьте одинарные кавычки). В строке
мы передаем carHTML в функцию $, которая преобразует HTML в jQuery-
элемент. Это значит, что в переменной carElement теперь хранится
jQuery-элемент с информацией о теге и мы сможем изменить
свойства этого элемента перед тем, как добавить его на страницу.
В строке мы вызываем для carElement метод css, чтобы задать
изображению машины координаты. Этот код устанавливает отступ
слева согласно координате x объекта и отступ сверху согласно его коор-
динате y. Иными словами, в окне браузера левый край изображения
будет отстоять от левой границы окна на x пикселей, а верхний край
изображения будет отстоять от верхней границы окна на y пикселей.
! В этом примере метод css используется подобно методу
offset , который мы применяли для перемещения элемен-
тов по странице в десятой главе. К сожалению, offset
не так хорошо работает с несколькими элементами,
а нам нужно отображать сразу несколько машин, по -
этому в этом примере мы будем пользоваться css .
И наконец, в строке мы с помощью jQuery добавляем
carElement к элементу body нашего HTML-документа. После
этого carElement появится на странице. (Чтобы вспомнить,
как работает метод append, вернитесь к разделу «Создание
новых элементов через jQuery» на с. 150. )
Проверка функции drawCar
Давайте убедимся, что функция drawCar работает как положено.
Добавьте этот код в файл cars.html (после остального JavaScript-кода),
чтобы создать две машины.
$("body").append(carElement);
};
var tesla = new Car(20, 20);
var nissan = new Car(100, 200);
drawCar(tesla);
drawCar(nissan);
Здесь мы использовали конструктор Car для создания двух объектов —
первого с координатами (20, 20) и второго с координатами (100,
200) — и затем отобразили их в окне браузера с помощью drawCar.
12. Объектно-ориентированное программирование 183
Открыв теперь cars.html, вы должны увидеть изображения двух машин,
как на рис. 12.2.
Рис. 12.2. Отображение машин с помощью drawCar
Настройка объектов через прототипы
Есть другой, более объектно-ориентированный подход к рисованию
машин — задать для каждого объекта-машины метод отрисовки (назо-
вем его draw). Тогда вместо drawCar(tesla) можно будет написать
tesla.draw(). В объектно-ориентированном программировании при-
нято, чтобы объекты обладали собственной функциональностью, орга-
низованной в виде методов. В нашем случае функция drawCar изна-
чально предназначена для изображения объектов-машин, поэтому
стоит сделать ее частью каждого объекта, а не использовать как отдель-
ную функцию.
Прототипы JavaScript — это механизм, который упрощает исполь-
зование общей функциональности (то есть методов) разными объек-
тами. У всех конструкторов есть свойство prototype, к которому можно
добавлять методы; любой метод, добавленный к свойству prototype,
будет доступен всем объектам, которые созданы с помощью этого
конструктора.
На рис. 12.3 показан синтаксис добавления метода к свойству
prototype.
184 Часть II. Продвинутый JavaScript
Имя
Имя
конструктора
метода
Car.prototype.draw = function () {
// Тело метода
}
Рис. 12.3. Синтаксис добавления метода к свойству prototype
Добавляем метод draw к прототипу Car
Давайте добавим метод draw к свойству Car.prototype, чтобы он по
-
явился у всех объектов, созданных вызовом new Car. Выберите File
Save As