Inheritance in nested namespaces in JavaScript

Question

I want to setup nested namespaces to organize my code. I am trying to follow the plugin-like structure described in this article. The problem is I don't understand how to access this.error_msg in my example. Have I set this up correctly? Would I have to use jQuery .extend or .prototype to access this.error_msg?

(function(TC, $, undefined){

    TC.ajax = function() {
        this.error_msg = 'default error...';         
    };

    TC.ajax.run = function(){
        //do stuff...
        TC.ajax.handle_error();
    };

    TC.ajax.handle_error = function(){
        alert(this.error_msg);
    };        

}(window.TC = window.TC || {}, jQuery));

// Test it
TC.ajax.run();

Demo: http://jsfiddle.net/g99yt/

Evan · Accepted Answer · 2013-03-14 19:37:16Z

3

The important thing to remember is that each time you use function(), you are creating a new scope. So you can see that in your TC.ajax.handle_error method that this.error_msg is undefined because you haven't defined it in that scope. One thing you can do is prototype to make sure those methods relate back to your ajax object and declare a new instance of the object, and then call your methods on that. see below :

(function(TC, $, undefined){

    TC.ajax = function() {
        this.error_msg = 'default error...';         
    };

    TC.ajax.prototype.run = function(){
        //do stuff...
        this.handle_error.call(this);
    };

    TC.ajax.prototype.handle_error = function(){
        alert(this.error_msg);
    };        

}(window.TC = window.TC || {}, jQuery));

// Test it
 var ajaxInstance = new TC.ajax();

ajaxInstance.run();

and the fiddle

you do have other options like keeping a locally global variable like @kta does, or by setting your scope through the call function, but that doesn't really apply well to your structure.

answered Mar 14, 2013 at 19:37

Evan

6,1239 gold badges36 silver badges64 bronze badges

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

2 Comments

Justin Over a year ago

This maintains scope well unlike the other solutions. It sucks to add the step of having to create an instance, but I understand why that is required.

Evan Over a year ago

glad I could help. it's probably a good idea to get into the practice of creating instances if you plan on getting into more indepth object oriented javascript

catacs · Accepted Answer · 2013-03-14 19:29:53Z

2

I think your code must look something like this:

(function(TC, $, undefined){
    _this = this;
    TC.ajax = function() {
        _this.error_msg = 'default error...';         
    };

    TC.ajax.run = function(){
        //do stuff...
        TC.ajax.handle_error();
    };

    TC.ajax.handle_error = function(){
        alert(_this.error_msg);
    };        

}(window.TC = window.TC || {}, jQuery));

// Test it
TC.ajax.run();

answered Mar 14, 2013 at 19:29

catacs

3111 silver badge8 bronze badges

1 Comment

Justin Over a year ago

This works but I am trying to avoid error_msg being global (under TC) in scope. I want it only accessible from TC.ajax and functions nested below that. So when I wrote this.error_msg what I meant was TC.ajax.error_msg. So far it looks like I'd need to use prototype for this, as described by Evan... Unless you know another way?

a better oliver · Accepted Answer · 2013-03-14 20:04:15Z

0

If TC.ajax is supposed to be a constructor, then run() and handle_error() need to be added to a prototype.

But you could do something like

TC.ajax = {};    
TC.ajax.error_msg = 'default error...';

In your case error_msg will be assigned to this as soon as you call TC.ajax(), which never happens. And even then, this would refer to TC. And when TC.ajax.handle_error()is called, this refers to TC.ajax.

edited Mar 14, 2013 at 20:04

answered Mar 14, 2013 at 19:38

a better oliver

26.9k2 gold badges64 silver badges67 bronze badges

Comments

Amy · Accepted Answer · 2013-03-14 21:23:20Z

0

It's actually a common problem, it's not immediately clear what this refers to. So to explain:

TC.ajax.handle_error = function(){
    alert(this.error_msg);
};

The this in the TC.ajax.handle_error function refers to the function and not your TC object. So just save the reference to TC so you can refer to it later:

var _this = this;

...
_this.error_msg = 'default error....';
...

TC.ajax.handle_error = function(){
     alert(_this.error_msg);
 };

edited Mar 14, 2013 at 21:23

answered Mar 14, 2013 at 19:38

Amy

7,5262 gold badges22 silver badges31 bronze badges

2 Comments

Justin Over a year ago

Hmmm, but I am trying to reference TC.ajax.error_msg, not TC.error_msg. How would this apply to that scope?

Amy Over a year ago

@Justin Sorry I'll clarify the answer, TC has error_message as a property, so having that reference to TC allows you to access TC.error_msg.

Justin · Accepted Answer · 2013-07-11 23:18:33Z

0

This is what I ended up using:

(function ($, TC, undefined) {

    TC.nestedNamespace = TC.nestedNamespace || {};

    //add a public function to our new namespace 
    TC.nestedNamespace.test = function () {        
       console.log("Winning!");    
    };

}(jQuery, window.TC = window.TC || {}));

TC.nestedNamespace.test();

Example JSFiddle. I found this method in the comments of a related article.

answered Jul 11, 2013 at 23:18

Justin

27.4k16 gold badges118 silver badges130 bronze badges

Collectives™ on Stack Overflow

Inheritance in nested namespaces in JavaScript

5 Answers 5

2 Comments

1 Comment

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

1 Comment

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related