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

значения разных типов: строку ("Оладушек"), числа (4 и 6) и булево

значение (true). Помимо строк, чисел и булевых значений в свойствах

объектов можно хранить функции — тогда эти свойства называют

методами . В сущности, мы уже пользовались некоторыми встроенными

в JavaScript методами: например, это метод join для массивов и метод

toUpperCase для строк.

А теперь давайте посмотрим, как создавать собственные методы.

Один из способов — воспользоваться точечной нотацией. К примеру,

научим нашу собаку лаять, добавив к объекту dog метод под названием

bark:

Bark — лай

 dog.bark = function () {

 console.log("Гав-гав! Меня зовут " + this.name + "!");

};

 dog.bark();

Гав-гав! Меня зовут Оладушек!

В строке  мы добавили к объекту dog свойство bark и задали

в качестве его значения функцию. В строке , в теле этой функции, мы

177

использовали console.log, чтобы напечатать: «Гав-гав! Меня зовут

Оладушек!» Обратите внимание на запись this.name — таким обра-

зом мы получаем значение, сохраненное в свойстве name этого объекта.

Давайте разберемся подробнее, как работает ключевое слово this.

Ключевое слово this

This — этот,

Ключевое слово this можно использовать в теле метода, чтобы обра-

это

титься к объекту, для которого этот метод вызывается. Например, при

вызове метода bark для объекта dog, this обозначает объект dog, а зна-

чит this.name — это свойство dog.name. Ключевое слово this делает

методы более гибкими, позволяя добавлять один и тот же метод ко мно-

гим объектам так, чтобы он имел доступ к свойствам того объекта, для

которого в данный момент вызывается.

Используем один метод с разными объектами

Speak —

Давайте создадим новую функцию speak, чтобы затем использовать ее

говорить

как метод с разными объектами, обозначающими разных животных.

В случае вызова для какого-нибудь объекта метод speak будет

обращаться к имени объекта (this.name) и звуку, который издает

Sound — звук

животное (this.sound), чтобы вывести в консоль сообщение.

var speak = function () {

console.log(this.sound + "! Меня зовут " + this.name + "!");

};

Теперь создадим еще один объект, чтобы добавить к нему функцию

speak в качестве метода:

var cat = {

sound: "Мяу",

name: "Варежка",

 speak: speak

};

Cat — кошка

Здесь мы создали новый объект cat со свойствами sound, name

и speak. В строке  мы присвоили свойству speak значение —

созданную ранее функцию speak. Теперь cat.speak является мето-

дом, который можно вызывать командой cat.speak(). Поскольку

в коде метода используется ключевое слово this, в случае вызова для

объекта cat он получит доступ к свойствам именно этого объекта.

Давайте проверим:

178 Часть II. Продвинутый JavaScript

cat.speak();

Мяу! Меня зовут Варежка!

Когда мы вызываем метод cat.speak, он запрашивает значения

двух свойств объекта cat: this.sound (это "Мяу") и this.name (это

"Варежка").

Ту же самую функцию speak можно использовать как метод и для

других объектов:

var pig = {

Pig —

sound: "Хрю",

поросенок

name: "Чарли",

speak: speak

Horse —

лошадь

};

var horse = {

sound: "И-го-го",

name: "Мэри",

speak: speak

};

pig.speak();

Хрю! Меня зовут Чарли!

horse.speak();

И-го-го! Меня зовут Мэри!

Повторюсь: в коде метода ключевое слово this ссылается

на объект, для которого метод был вызван. Другими словами, при

вызове 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

// Здесь будет 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, значения которых

соответствуют переданным аргументам.