Ник Морган - 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

// Здесь будет JavaScript-код

Функция-конструктор Car

Теперь введите следующий код между тегов в файле cars.html

(вместо комментария "// Здесь будет JavaScript-код"), чтобы создать

конструктор Car, добавляющий каждому объекту-машине пару

координат.

var Car = function (x, y) {

this.x = x;

this.y = y;

};

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

в файле 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 пикселей.