8: Основы объектно-ориентированного программирования

AJAX

previous page next page

8: Основы объектно-ориентированного программирования

Основы JavaScript

Почти каждый современный язык программирования имеет некоторый метод записи объектно-ориентированного (ОО) кода. Если вы знакомы с такими языками, как C, Java, VB, php или подобными, то должны быть знакомы и со структурой Class этих языков.

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

Структура Class и объекты в целом хорошо работают потому, что они действуют как реальные объекты. Например, мы можем иметь класс Телевизор. Так как все телевизоры в целом работают одинаково, то нет необходимости переопределять множество атрибутов телевизора, чтобы сделать еще один новый. Этот класс будет определять методы и свойства телевизора. Мы будем иметь такие свойства, как марка, размер экрана, и т.д., и методы, такие, как включить/выключить, сменить канал, и т.д.

JavaScript слегка отличается от стандартной объектно-ориентированной структуры Class. Вместо использования классов для создания объектов, каждая функция в JavaScript может эффективно действовать как класс. Мы используем концепцию вложенных функций, называемую прототипированием (Prototyping), для выполнения таких же вещей, как и языки со структурами Class. Если вы знакомы с ОО-языком на основе классов, то прототипирование может показаться сначала непривычной концепцией, но она предлагает большие возможности и часто является значительно более гибкой с точки зрения программирования, чем другие методы.

new Object и объектные литералы

Для начала необходимо объяснить, как объекты действуют в JavaScript. Объекты позволяют определить переменную и задать затем для этой переменной любое число свойств. Чтобы понять это, давайте посмотрим на простой пример:

var myObj  = new Object;
myObj.a    = 5;
myObj['b'] = 10;
myObj.c    = 20;
myObj.getTotal = function(){
  alert(this.a+this.b+this.c);
});

// или 

var myObj = {a:5, b:10, c:20, getTotal:function(){ alert(this.a+this.b+this.c); }};

Оба эти фрагмента кода создают одну и ту же переменную myObj. Первый пример использует синтаксис new Object(), а затем определяет все свойства одно за другим. Второй фрагмент кода является сокращенной нотацией, которая делает в точности то же самое. Мы имеем теперь переменную myObj. myObj содержит три переменные для целых чисел: a, b и c. Для доступа к любой из них мы просто используем myObj.a или myObj['a']. Можно видеть, что myObj имеет также в качестве свойства функцию getTotal. Мы обращаемся к getTotal таким же образом, как и к свойствам a, b и c: myObj.getTotal(). Функция getTotal() обращается к переменным в переменной myObj с помощью "this". При выполнении кода внутри функции в объекте "this" ссылается на объект. В данном случае "this" ссылается на сам объект myObj.

Как можно видеть, объекты в JavaScript являются чрезвычайно полезными. К сожалению, часто приходится объявлять слишком много информации каждый раз, когда мы хотим создать объект. Например, давайте создадим объект Animal:

var myAnimal = {
  name:     'felix',
  species:  'cat',
  talk:     function(){ alert('Meow!'); },
  callOver: function(){ alert(this.name+' ignores you'); },
  pet:      function(){ alert('Purr!'); }
}

Мы имеем переменную myAnimal, которая представляет кота (cat) с именем Феликс (felix). Однако, если потребуется создать другого кота, нам понадобиться ввести все это снова. Здесь на помощь приходит объектно-ориентированный подход. Вместо перепечатки всякий раз всего объекта можно определить функцию, которая создает для нас аналогичный объект:

function Cat(name){
  this.name     = name;

  this.species  = 'Cat';
  this.talk     = function(){ alert('Meow!'); }
  this.callOver = function(){ alert(this.name+' ignores you'); },
  this.pet      = function(){ alert('Purr!'); }
}

var felix = new Cat('Felix');
var sam   = new Cat('Sam');
var patty = new Cat('Patty');

felix.pet();          // выводит 'Purr!'
sam.callOver();       // выводит 'Sam ignores you'.  Просто, как кот!
alert(patty.species); // выводит 'cat'

В этом примере создана одна функция Cat, а затем создаются три новых кота с помощью этой функции: Felix, Sam и Patty. Каждый из этих котов имеет одинаковые функции: talk, callOver и pet, и каждая из них имеет свойство species, заданное как 'cat'. И подобно всем котам, они в равной степени своенравны.

Обычно говорят, что felix, sam и patty являются экземплярами одного объекта: Cat. Код самой функции Cat называется конструктором. Мы передаем ей переменную "name" и используем ее для задания this.name. К сожалению, при объявлении каждой функции Cat в конструкторе в действительности создается новая копия каждой функции всякий раз при создании нового Cat. Так как функции talk, callOver и pet являются идентичными, то нам в действительности требуется только одна копия каждой функции. Здесь на помощь приходит прототипирование.

Прототипирование

Можно переписать функцию Cat таким образом, чтобы каждая функция объявлялась только один раз:

function Cat(name){
  this.name = name;
}
Cat.prototype.species  = 'Cat';
Cat.prototype.talk     = function(){ alert('Meow!'); };
Cat.prototype.callOver = function(){ alert(this.name+' ignores you'); };
Cat.prototype.pet      = function(){ alert('Purr!'); };

Синтаксис этого метода немного отличается от предыдущего. Вместо объявления всех свойств и методов внутри функции Cat, они теперь объявляются с помощью Cat.prototype. Это может показаться более сложным, но предлагает много преимуществ. Предположим, например, что надо добавить новую функцию sleep для каждого имеющегося cat. Это можно сделать двумя способами. Первый: можно добавить функцию sleep в felix, sam и patty. Это, однако, не только трудоемко, но также и неэффективно. Если бы имелось 500 cat, то потребовалось бы сначала отследить всех этих 500 котов, а затем добавить функцию каждому cat.

Однако с помощью прототипов можно добавить функцию sleep всем cat одновременно:

Cat.prototype.sleep = function(){ alert(this.name+' falls asleep'); };

Этот способ не только быстрее, но к тому же нам больше не требуется отслеживать каждого cat, чтобы добавить функцию sleep.

Существует более быстрый способ добавления прототипов. С помощью объектного литерала можно одновременно задать любое количество прототипов свойств или методов.

function Cat(name){
  this.name = name;
}
Cat.prototype = {
  species:  'Cat',
  talk:     function(){ alert('Meow!'); },
  callOver: function(){ alert(this.name+' ignores you'); },
  pet:      function(){ alert('Pet!'); }
}

Важно отметить, что с помощью этого метода можно задать свойства функции только один раз. После этого необходимо использовать предыдущий метод.

Object.prototype.method = function(){ ... }.

Если попробовать теперь добавить в cat метод sleep с помощью этого метода:

Cat.prototype = {
  sleep: function(){ alert(this.name+' falls asleep'); }
}

то предыдущие прототипы, species, talk, callOver и pet, будут все удалены. Единственным имеющимся прототипом для cat будет sleep.

Прототипы можно также использовать для расширения встроенных объектов JavaScript. Можно реализовать, например, функцию String.prototype.reverse, которая будет возвращать любую созданную строку в обратном порядке:

String.prototype.reverse = function(){
  var out = '';
  for(var i=this.length-1; i>=0; i--){
    out+=this.substr(i, 1);
  }
  return out;
}
alert('asdf'.reverse());

Это может быть очень полезным инструментом при правильном использовании. Можно реализовать String.prototype.trim() для удаления из строки всех пробелов, Date.prototype.dayName - для получения названия дня недели из объекта Date и т.д. Однако настоятельно рекомендуется воздержаться от добавления каких-либо прототипов в Array или Object, так как в этом случае циклы "for-in " для двух этих типов данных будут работать неправильно. Рассмотрим следующий пример:

var myArray = [1, 2, 3];
for(n in myArray) alert(n);  // выводит 0, 1 и 2 - индексы массива.

Array.prototype.something = function(){ };

for(n in myArray) alert(n);  // выводит 'something', 0, 1 и 2.

Как можно видеть, здесь выполнено прототипирование Array и добавлена функция 'something'. Однако теперь эта функция 'something' видна как элемент массива, результат, который определенно не ожидался и не требовался. То же самое происходит с объектами и объектными литералами, если выполнить прототипирование Object. Если можно быть абсолютно уверенным, что цикл "for-in" никогда не будет использоваться и никакой другой разработчик не будет использовать этот код JavaScript, то можно применять прототипирование для Array или Object, но надо помнить о связанных с этим проблемах. Однако существуют другие методы для достижения тех же результатов. Например, для расширения Array можно задействовать следующий метод без прототипирования:

Array.find = function(ary, element){
  for(var i=0; i<ary.length; i++){
    if(ary[i] == element){
      return i;
    }
  }
  return -1;
}

alert(Array.find(['a', 'b', 'c', 'd', 'e'], 'b'));  // выводит 1

Как можно видеть, теперь необходимо печатать type Array.find(ary, e) вместо ary.find(e), что пришлось бы делать, если прототипировать объект Array, но стоит напечатать эти несколько дополнительных символов, чтобы избежать потери существующей функциональности JavaScript.

Переменные Private, Public и Static

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

Скрытая (Private) - объявляется с помощью 'var variableName' или 'function functionName' внутри объекта. Могут быть доступны только другим скрытым или привилегированным функциям.
Открытая (Public) - объявляется с помощью 'this.variableName' внутри объекта. Может изменяться любой функцией или методом.
Привилегированная (Privileged) - объявляется с помощью 'this.functionName = function(){ ... }' внутри объекта. Доступна для любой функции или метода и может обращаться или изменять любую скрытую переменную.
Прототипированная (Prototype) - объявляется с помощью 'Class.prototype.variableName' или 'Class.prototype.functionName'. Объявленные таким образом функции будут иметь доступ к любой открытой или прототипированной функции. Попытки изменить созданную таким образом переменную будут вместо этого создавать новую открытую переменную на объекте, а прототипированная переменная будет недоступна.
Статическая (Static) - объявляется с помощью 'Class.variableName' или 'Class.functionName'. Может изменяться любой функцией или методом. Такой метод используется редко.

Чтобы понять различия между уровнями, давайте рассмотрим пример:

function Cat(name, color){
  /*
  Конструктор: при создании объекта выполняется любой находящийся здесь код 
  */
  Cat.cats++;

  /* Скрытые переменные и функции доступны только скрытым или привилегированным 
  функциям. Отметим, что  'name' и 'color', переданные в Class, уже являются 
  скрытыми переменными.
  */

  var age  = 0;
  var legs = 4;
  function growOlder(){
    age++;
  }

  /*
  Открытые переменные доступны открыто или скрыто 
  */

  this.weight = 1;
  this.length = 5;

  /*
  Привилегированные функции доступны открыто или скрыто. 
  Могут обращаться к скрытым переменным.

  Невозможно изменить, можно только заменить открытой версией
  */

  this.age = function(){
    if(age==0) this.length+=20;

    growOlder();
    this.weight++;
  }
}

/*
Прототипированные функции доступны открыто 
*/
Cat.prototype = {
  talk:     function(){ alert('Meow!'); },
  callOver: function(){ alert(this.name+' ignores you'); },
  pet:      function(){ alert('Pet!'); }
}

/*
Прототипированные переменные доступны открыто.
Нельзя перезаписать, только заменить открытой версией 
*/

Cat.prototype.species = 'Cat';

/*
Статические переменные и функции доступны открыто 
*/

Cat.cats = 0;

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

previous page start next page