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

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

 

Объекты в JavaScript

В первую очередь нужно сказать, что JavaScript – это объектный язык. Это значит, что понятием класса (в привычном понимании этого слова) он не оперирует, но оперирует понятием объекта. Приведу пример:

 

• var greeter = {
•   name: ‘John Smith’,
•   greet: function() {
•     alert(‘Hello, ‘ + this. name);
•   }
• };
• greeter. greet();
• // Поприветствуем кого-нибудь еще
• greeter. name = ‘Alex’;
• greeter. greet();

 

Говоря об объекте, можно провести аналогию с хэшем: объект, как и хэш, является набором ключей (атрибутов) и соответствующих им значений. JavaScript даже поддерживает альтернативный синтаксис для доступа к атрибутам объекта – например, последние 2 строки предыдущего примера можно было записать так:

 

greeter[‘name’] = ‘Mike Lapshin’;

greeter[‘greet’]();

 

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

var attrName = ‘name’;

greeter[attrName] = ‘Alex’;

При присвоении значения несуществующему атрибуту этот атрибут будет автоматически создан:

 

greeter. newAttribute = ‘New attribute value’;

alert(greeter. newAttribute);

Конструкторы

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

 

• // Конструктор Greeter
• function Greeter(name) {
•   this. name = name;
•  
•   // Точно так же можно создать метод
•   this. greet = function() {
•     alert(‘Hello, ‘ + this. name);
•   };
• }
•  
• // Создаем объекты
• var johnGreeter = new Greeter(‘John’);
• var alexGreeter = new Greeter(‘Alex’);
•  
• alexGreeter. greet(); // Hello, Alex
• johnGreeter. greet();  // Hello, John

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

 

• johnGreeter. greet = function() {
•   alert(‘Batito de coco, ‘ + this. name);
• };
•  
• johnGreeter. greet(); // Batito de coco, John
• alexGreeter. greet(); // Hello, Alex

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

 

Мы видим, что метод greet() объекта alexGreeter остался неизменным - что, по-сути, логично. Дело в том, что если метод инициализируется в конструкторе, то при создании объекта он каждый раз будет создаваться заново (то есть копироваться). Обратная сторона медали в этом случае – память. Если создать 20000 объектов Greeter, то абсолютно одинаковый у всех экземпляров метод Greeter. greet() будет создан в памяти 20000 раз.

 

ООП же подразумевает, что экземпляры одного и того же класса различаются только данными, а программная логика у них идентична. Соответственно, такое дублирование методов – неоправданная трата ресурсов.

 

Прототип объекта

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

 

• // Конструктор Greeter
• function Greeter(name) {
•   this. name = name;
• }
•  
• Greeter. prototype. greet = function() {
•   alert(‘Hello, ‘ + this. name);
• }
•  
• // Создаем объекты
• var johnGreeter = new Greeter(‘John’);
• var alexGreeter = new Greeter(‘Alex’);
•  
• alexGreeter. greet(); // Hello, Alex
• johnGreeter. greet();  // Hello, John

Прототип, как и все остальное в JavaScript, является объектом. Доступ к нему можно получить через ИмяКласса. prototype. Мы можем переписать 6-ю строку примера следующим образом:

 

Greeter. prototype[‘greet’] = function() {

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

Если запрашиваемый атрибут определен, используется его значение. В противном случае атрибут ищется в прототипе объекта. Если атрибут не найден и там, то он считается неопределенным.

 

На самом деле атрибута greet нет ни у объекта alexGreeter, ни у объекта johnGreeter. У этих объектов есть только атрибут name. Но интерпретатор при обращении к методу greet находит этот метод в прототипе.

 

Чтобы проиллюстрировать вышесказаное, попробуем еще раз переопределить метод greet. Сперва мы переопределим его у конкретного объекта, а потом у прототипа объекта.

 

alexGreeter. greet = function() {

  alert(‘Howdy, ‘ + this. name);

}

 

// Теперь у объекта alexGreeter

// есть атрибут greet, и интерпретатор

// при обращении к нему будет использовать

// атрибут объекта, а не атрибут прототипа

alexGreeter. greet();  // Howdy, Alex

 

// У объекта johnGreeter атрибута greet

// нет, поэтому будет использована общая версия

// этого метода из прототипа класса Greeter

johnGreeter. greet(); // Hello, John

Но если переопределить метод greet в прототипе, а сами объекты оставить неизменными, новый метод распространятся сразу на все объекты:

 

• Greeter. prototype. greet = function() {
•   alert(‘What a wonderful day, ‘ + this. name);
• }
•  
• alexGreeter. greet(); // What a wonderful day, Alex
• johnGreeter. greet();  // What a wonderful day, John

 

Нужно отметить, что добавление в уже существующие объекты новой функциональности всегда осуществляется посредством изменения их прототипа. Например, такой подход реализован в библиотеке Prototype, которая расширяет (в тех браузерах, которые это поддерживают) функциональность стандартных объектов (строк, массивов, DOM-элементов) с помощью изменения их прототипа.