Global variables for nested object classes in jQuery

Question

So i have the following structure in my js file:

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();
});

However, this code doesn't work. this.window_height doesn't reach the right level in the object class. I'm unsure how to get to the higher level in order to store and access the global variables. I think i need to do something like this.parent(), but obviously that doesn't work :/

Any ideas?

Nicola Peluchetti · Accepted Answer · 2011-07-04 11:13:15Z

3

You can't use this inside the object to refer to the variables like you did. They are properties of the object and inside the object can be accessed directly. This works for me:

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);
        }
    }

}

answered Jul 4, 2011 at 11:13

Nicola Peluchetti

76.9k32 gold badges150 silver badges197 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Scotty Over a year ago

Why it never occurred that they would be inherited is beyond me :) Cheers!

Craig Blaszczyk · Accepted Answer · 2011-07-04 11:12:22Z

1

You need to save a reference to the enclosing class. Try reading a little about 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);
        }
    }

}

answered Jul 4, 2011 at 11:12

Craig Blaszczyk

9821 gold badge7 silver badges20 bronze badges

1 Comment

Nicola Peluchetti Over a year ago

Your code gives an error: "that is not defined". I think you must use that when you are creating an object with a costructor function, not like this. in this case you cann access the property withouth specifying anything (inside the object, of course)

Collectives™ on Stack Overflow

Global variables for nested object classes in jQuery

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related