Глобальные переменные для классов вложенных объектов в jQuery

Question

Итак, у меня есть следующая структура в моем js-файле:

var scrollingElements = {

    doc_height :    null,
    window_height : null,

    globalVar : {
        init: function() {
            //Get window and document initial heights
            this.doc_height     = $(document).height();
            this.window_height  = $(window).height();
        }
    },

    headerNav : {
        init: function(){
            console.log(this.doc_height);
        }
    },

    quickNavSidebar : {
        init: function(){
            console.log(this.doc_height);
        }
    }

}

$(function(){
    scrollingElements.globalVar.init();
    scrollingElements.headerNav.init();
    scrollingElements.quickNavSidebar.init();
});

Однако этот код не работает.this.window_height не достигает нужного уровня в классе объекта.Я не уверен, как перейти на более высокий уровень для хранения и доступа к глобальным переменным.Я думаю, что мне нужно сделать что-то вроде this.parent(), но, очевидно, это не работает: /

Есть идеи?

Answer 1

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

var scrollingElements = {

    doc_height :    null,
    window_height : null,

    globalVar : {
        init: function() {
            //Get window and document initial heights
            doc_height     = $(document).height();
            window_height  = $(window).height();
            console.log(doc_height);
        }
    },

    headerNav : {
        init: function(){
            console.log(doc_height);
        }
    },

    quickNavSidebar : {
        init: function(){
            console.log(doc_height);
        }
    }

}

Answer 2

Вам необходимо сохранить ссылку на включающий класс.Попробуйте прочитать немного о Javascript closures

var scrollingElements = {

    doc_height :    null,
    window_height : null,
    that: this,

    globalVar : {
        init: function() {
            //Get window and document initial heights
            that.doc_height     = $(document).height();
            that.window_height  = $(window).height();
        }
    },

    headerNav : {
        init: function(){
            console.log(that.doc_height);
        }
    },

    quickNavSidebar : {
        init: function(){
            console.log(that.doc_height);
        }
    }

}