How do you add objects to a javascript namespace?

Question

var Test = (function() {
    return {
        useSub: function () {
            this.Sub.sayHi();
        },

        init: function () {
            $(document).ready(this.useSub);
        }
    };
})();

Test.Sub = (function () {
    return {
        sayHi: function () {
            alert('hi');
        }
    };
})();

Test.useSub(); // works
Test.init(); // explodes

Above I am trying to create a Test namespace and add an object Sub to it. I was doing fine until I tried using the object in jQuery. The error is "Uncaught TypeError: Cannot call method 'sayHi' of undefined". If there is a better way to do this, I am open to it.

Edit:

Obviously this was demo code. In my real application the solution that I went with because I think it is the most clear is this one:

var Namespace (function () {
  return {
    init: function () {
      $(document).ready(function() {
        Namespace.onReady();
      }
    },
    onReady: function() {
      alert('Now I am back in the Namespace scope. Proceed as planned');
    }
  };
})();

Edit2: All jQuery callbacks seem to require they are used in this manner or else the scoping is screwed up.

Felix Kling · Accepted Answer · 2010-06-16 19:35:29Z

5

I think it is a scope problem. If you do

$(document).ready(this.useSub);

then this.useSub will be executed in the window scope (so inside the function, this refers to the window object) and there doesn't exist a Sub attribute.

Try:

init: function () {
    var obj = this;
    $(function(){obj.useSub()});
}

~~For some reason it does not work using $(document).ready(function(){obj.useSub()}); but it works with the $() shortcut.~~

edited Jun 16, 2010 at 19:35

answered Jun 16, 2010 at 19:29

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

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

2 Comments

Skilldrick Over a year ago

var that = this; $(document).ready(function () {that.useSub();}); Works for me.

Felix Kling Over a year ago

@Skilldrick: I tested it with JS Bin and it does not work there, but then it has probably to do with their setup.

John Hartsock · Accepted Answer · 2010-06-16 19:38:28Z

2

Here is one way

var Test = {
  useSub : function () { 
    Test.Sub.sayHi(); 
  }, 
  init: function () { 
    $(document).ready(Test.useSub); 
  },
  Sub: {
    sayHi: function () { 
      alert('hi'); 
    } 
  }
};

edited Jun 16, 2010 at 19:38

answered Jun 16, 2010 at 19:27

John Hartsock

87.1k23 gold badges135 silver badges146 bronze badges

Comments

lincolnk · Accepted Answer · 2010-06-16 19:29:37Z

1

in this line:

$(document).ready(this.useSub);

you're passing a reference to a function and the scope is lost- when the function runs, this no longer means Test.

answered Jun 16, 2010 at 19:29

lincolnk

11.2k4 gold badges43 silver badges63 bronze badges

Collectives™ on Stack Overflow

How do you add objects to a javascript namespace?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related