Создание объекта с использованием jQuery селекторов?

Question

[Дмитрий]

Пытаюсь создать объект:

var obj = {<br>
                wrapper: $(".prx"),<br>
                slides: $(".prx__slides"),<br>
                slidesItems: this.slides.children(),<br>
                ...<br>
            };<br>

Почему slides при использовании в slidesItems является undefined?

Answer 1

[Masterme]

Работа с объектами в JS немного отличается от классической схемы в других языках. Нет ключевого слова class и нет деструкторов. Вот так объявляется класс и создаётся экземпляр класса:

var Obj = function Obj(){
  this.wrapper = $('.prx')
  this.slides = $('.prx_slides')
  this.slidesItems = this.slides.children()
}

var obj = new Obj()

функция — это конструктор, автоматически вызываемый при создании

Моар: learn.javascript.ru/constructor

Answer 2

[d4rkr00t]

Потому что в данном случае this ссылается на глобальный контекст в котором нет свойства slides, попробуйте завернуть this.slides.children() в анонимную функцию как-то так:

slidesItems: function() {
    return this.slides.children();
}

Comments

[Николай Васильчук]

Тут уже придется вызывать obj.slidesItems() и весь профит потеряется.

Придется извращаться так

var obj = {
  wrapper: $(".prx"),
  slides: $(".prx__slides")
};
obj.slidesItems: obj.slides.children();

или так

var obj = (function() {
  var wrapper = $(".prx");
  var slides = $(".prx__slides");
  var slidesItems = slides.children();
  return {
    wrapper: wrapper,
    slides: slides,
    slidesItems: slidesItems
  };
}());

[d4rkr00t]

Можно будет просто закешировать результат this.slides.children() например так:

var obj = {
    wrapper: $(".prx"),
    slides: $(".prx__slides"),
    slidesItemsCache: false,
    slidesItems: function () {
        if (!this.slidesItemsCache) {
            this.slidesItemsCache = this.slides.children();
        }
        return this.slidesItemsCache;
    }
};