Перейти к содержимому

Сервис обмена электронных валют


ООП в JavaScript

#1 c0ns0l3

c0ns0l3
  • Пользователь
  • 264 сообщений
  • Репутация: 49
2

Отправлено 04 Май 2012 - 20:47

Очень часто, последнее время приходится заниматься написанием плагинов под jQuery и ему подобные...
И начал как полагалось достаточно не с легкого... слайдера контента с различными визуальными эффектами.

Уперся я в ограничение, что при написании простого плагина через ф-ции, получалось глобальные переменные в общем пространстве имен документа, и немогли работать одновременно более одного слайдера на странице нормально, т.к. они "кушали" одни и те-же переменные...
Пришлось искать методы реализации ООП на JS, и вот хочу привести вам 2 примера реализации сего чуда.

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

function Car (type) {
    this.type = type;
    this.color = "red";
    this.getInfo = getCarInfo;
}
function getCarInfo() {
    return this.color + ' ' + this.type + ' car';
}

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

var car = new Car('honda');
car.color = "white";
alert(car.getInfo());
//White honda car

Но, у такой техники есть один большой минус - очень много приходится описывать лишних функций (как в нашем примере getCarInfo), к тому же которые являются глобальными и могут в итоге конфликтовать с другими "подключаемыми модулями". Можно конечно воспользоваться no-name функциями, но вскоре можно и легко будет запутаться в большом коде...
Вот пример использования no-name функций.

function Car (type) {
    this.type = type;
    this.color = "red";
    this.getInfo = function(){ 
       return this.color + ' ' + this.type + ' car';
    }
}


Еще можно использовать прототипы функций... Немного предисловия... у каждого объекта или функции есть встроенный объект _prototype_, который создается во время конструирования (создания) объекта. Тоесть это уже вложенный (не общий, не публичный) объект.

function Car (type) {
    this.type = type;
    this.color = "red";
}
Car.prototype.getCarInfo() {
    return this.color + ' ' + this.type + ' car';
}
Вызывать или обращаться к такому методу, можно так же как и в самом начале этого пункта. (Car.getCarInfo())

2. Создание сразу объекта. Опуская ключевое new

Создавать объекты можно двумя способами:
  • car = new Object();
  • car = {}
var Car = {
    type: "honda",
    color: "red";
    getInfo: function(){
        return this.color + ' ' + this.type + ' car';
    }
}

В данном варианте, Вам не прийдется обозначать объект(аля класс), он уже у Вас есть.

Car.color = "white";
alert(Car.getInfo());

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



Еще хотелось добавить немного о "видах" переменных и методах.
  • private variables обозначаются 'var' ключем внутри объекта, и могут быть доступными только лишь private functions и privileged methods.
  • private functions обозначаются внутри конструктора объекта и могут быть доступными только лишь для privileged methods (включая конструктор объекта).
  • privileged methods обозначаются с помощью this.methodName=function(){...} и могут быть доступны извне объекта.
  • public properties обозначаются с помощью this.variableName и могут быть прочитаны/записаны извне объекта.
  • public methods обозначаются следующим способом Classname.prototype.methodName = function(){...} и могут быть доступны извне объекта.
  • prototype properties обозначаются Classname.prototype.propertyName = someValue
  • static properties обозначаются так: Classname.propertyName = someValue

 

 

  • 1


Оформление форума – IPBSkins.ru