ООП в Javascript

Объектно-ориентированное программирование в JavaScript - просто! В этой статье постараемся раскрыть азы javascript oop. Итак, рассмотрим методы создания объектов, свойства, функции, шаблоны, прототипы, создание объектов в конструкторах и создание синглтонов.


Объект в JavaScript можно создать с помощью двух основных методов:

1. использование ключевого слова "new"

var AnimationObject = new Object();
AnimationObject.framesPerSecond = 25;
AnimationObject.totalLength = 30;
AnimationObject.startAnimation = function () { /* any code */ };
AnimationObject.stopAnimation = function () { /* any code */ };

Из примера видно, что свойства и методы объекта можно создавать в процессе работы с ним.
Здесь Object() - это встроенный тип, при помощи которого создаются объекты и задаются свойства.

2. использование объектного литерала

var AnimationObject = {
 framesPerSecond: 25,
 totalLength: 30,
 startAnimation: function() { /* any code */ },
 stopAnimation: function() { /* any code */ }
}

Особое внимание нужно уделить расстановке запятых, так как это может вызвать непредсказуемые последствия в некоторых браузерах (ie6) - после каждого свойства ставим запятую, но не после последнего.

Доступ к свойствам объектов

И опять два варианта:

1. С помощью точки

alert(AnimationObject.framesPerSecond); // object.property

2. С помощью квадратных скобок

alert(AnimationObject['framesPerSecond']); // object['property']

Шаблоны

С помощью ключевого слова new и функции шаблона мы можем создать объекты с одними и теми же свойствами столько раз, сколько нам необходимо:

function Animation(element) {
 this.animationLength = 30;
 this.element = element;
}
var obj = document.getElementById('login');
var animateLogin = new Animation(obj);


При выполнении new Animation(obj) создается пустой объект, а потом выполняется функция Animation, которая может ссылаться на этот объект с помощью ключевого слова this, что позволяет нам создать необходимые свойства. После выполнения строки var animateLogin = new Animation(obj); переменная animateLogin будет ссылаться на объект Animation, а его свойствам animationLength и element будут присвоены соответствующие значения.

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

function Animation(element) {
 this.animationLength = 30;
 this.element = element;
 this.onStart = function () {
  alert("The animation is starting!");
 };
 this.onEnd = function () {
  alert("The animation is ending!");
 };
}
var obj = document.getElementById('login');
var animateLogin = new Animation(obj);


Прототипы

Cуществует способ создания шаблонов, по которым можно создать объекты, использующие общие свойства и методы. Для этого нам нужно присоединить свойства к prototype шаблона, после чего все объекты, созданные на основе этого шаблона, будут использовать свойства и методы прототипа вместо создания собственных. При обращении к свойству или методу объекта сначала проверяются его наличие у объекта, а если у объекта соответствующего свойства нет, то используется свойство прототипа.

Синтаксис очень похож на простое добавление свойств объекту, но вместо самого объекта мы добавляем их к его свойству prototype:

function Animation(element) {
 this.animationLength = 30;
 Animation.element = element;
}
Animation.prototype.onStart = function() {
 alert("The animation is beginning!");
};
Animation.prototype.onEnd = function() {
 alert("The animation is ending!");
};
var animateLogin = new Animation(loginform);
animateLogin.onStart();


В любой момент мы можем добавить новые свойства к прототипу шаблона, и они будут доступны для всех созданных с его помощью объектов:

Создание синглтона с помощью функции

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

var AnimationManager = new function() {
 this.framesPerSecond = 30;
 this.startAnimation = function(){ /* code goes here*/ }
}

Мы просто вызываем new для анонимной функции, и используем this, чтобы создать свойства и методы нового объекта. Создание объекта таким способом исключает возможность его использования в качестве шаблона. Если нужно более строго контролировать доступ к переменным объекта, никто не помешает нам создать приватные переменные описанным выше способом:

var AnimationManager = new function() {
 var framesPerSecond = 30;
 function construct() {
  this.startAnimation = function() {}
  this.getFPS = function() { return framesPerSecond; }
  this.setFPS = function(fps) { framesPerSecond = fps; }
 }
 return new construct();
}

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