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


Пользователь месяца
Ixman Ixman 1-й за Октябрь
Очков активности: 693 0 тем, 33 сообщения, 14 баллов репутации
Сайт: o5cat.ru
ТОП самых активных за этот месяц
  • Фотография yuran
    #1

    yuran (yurbol.ru)
    Очков активности: 79.5 0 тем, 53 сообщения, 1 балл репутации

  • Фотография ShowPrint
    #2

    ShowPrint (ShowPrint.ru)
    Очков активности: 58.5 Вне конкурса за определение пользователя месяца

  • Фотография BLIK
    #3

    BLIK
    Очков активности: 48 Вне конкурса за определение пользователя месяца

  • Фотография Mandarin
    #4

    Mandarin
    Очков активности: 42 0 тем, 28 сообщений, 1 балл репутации

  • Фотография WGN
    #5

    WGN (worldgamenews.com)
    Очков активности: 39 Вне конкурса за определение пользователя месяца

  • Фотография Ixman
    #6

    Ixman (o5cat.ru)
    Очков активности: 36 Вне конкурса за определение пользователя месяца

  • Фотография pozitron123
    #7

    pozitron123
    Очков активности: 30 2 темы, 14 сообщений, 1 балл репутации

  • Фотография Mariko
    #8

    Mariko
    Очков активности: 16.5 1 тема, 8 сообщений, 1 балл репутации

  • Фотография алексс
    #9

    алексс
    Очков активности: 13.5 1 тема, 6 сообщений, 1 балл репутации

  • Фотография RosenRot
    #10

    RosenRot (abuzov.com)
    Очков активности: 13.5 1 тема, 6 сообщений, 1 балл репутации

  • Показать весь ТОП 10
Поддержите форум! =)
Апдейты
  • Яндекс ИКС: 31.10.2018
  • Яндекс выдача: 13.11.2018
Топ 5 участников по репутации


ООП в JavaScript

#1 c0ns0l3

c0ns0l3
  • Неактивные
  • 264 сообщений
  • Репутация: 49
2

Отправлено 04 May 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