Ник Морган - JavaScript для детей. Самоучитель по программированию

Вызов конструктора 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. Введите этот код между тегов

в файле cars.html :

var Car = function (x, y) {

this.x = x;

this.y = y;

};

var drawCar = function (car) {

 var carHtml = '';

 var carElement = $(carHtml);

Position —

 carElement.css({

положение

position: "absolute",

Left

left: car.x,

— слева,

влево

top: car.y

});

Top

— вверх,

верх

 $("body").append(carElement);

};

Append —

добавить

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

и сохраните файл cars.html под именем cars2.html . Далее замените весь

JavaScript-код, находящийся во втором элементе script, следующим кодом:

 var Car = function (x, y) {

this.x = x;

this.y = y;

};

 Car.prototype.draw = function () {

var carHtml = '';

 this.carElement = $(carHtml);

this.carElement.css({

position: "absolute",

 left: this.x,

top: this.y

});

$("body").append(this.carElement);

};

var tesla = new Car(20, 20);

var nissan = new Car(100, 200);

tesla.draw();

nissan.draw();

После создания конструктора в строке , в строке  мы добавили

к Car.prototype новый метод draw. Таким образом, draw станет частью

всех объектов, созданных конструктором Car.

Код метода draw представляет собой слегка измененную функ-

цию drawCar. Сначала мы создаем строку с HTML-кодом, сохраняя ее

в переменной carHTML. В строке  мы создаем jQuery-элемент для этого

12. Объектно-ориентированное программирование 185

HTML, на этот раз сохраняя его в свойстве объекта this.carElement.

Далее в строке  мы, обращаясь к this.x и this.y, задаем координаты

верхнего левого угла изображения. (В конструкторе this соответствует

объекту, который в данный момент создается.)

Когда вы запустите этот код, страничка будет выглядеть так же, как

на рис. 12.2: функциональность кода осталась прежней, мы лишь изме-

нили его структуру. Преимущество этого подхода в том, что теперь код