Javascript `this` in objects-in-objects?

Question

Sorry for fuzzy post title, I can't formulate the correct name in English for this post.

For example I have such an object:

var APP = {
    a : 1,
    b : function(){
        return this.a;
    }
}

In such way, if I call console.log ( APP.b() ) than this will be referring to APP and result will be 1.

But how to connect to APP from sub-object? Example:

var APP = {
    a : 1,
    b : function(){
        return this.a;
    },
    c : {
        c1: function(){
             return APP.a;
        }
    }
}

console.log ( APP.c.c1() ) // 1

This example works, but it's bad idea to point directly to APP. For example:

APP2 = APP;
APP = null;
console.log ( APP2.b() );  // 1
console.log ( APP2.c.c1() ); // APP is undefined

UPD:

I've got half-decision: if I declare property c like a method:

c : function(){
    var self = this;
    return {
        c1: function(){
            return self.b();
        },
        c2: function(){}
    }
}

It will work, but I should call a method but not property (too much brackets) :

console.log( APP2.c().c1() ) instead of console.log( APP2.c.c1() )

davin · Accepted Answer · 2011-07-29 12:52:07Z

3

You can create a factory method:

var APP = (function(){
   var self;
   return self = {
      a : 1,
      b : function(){
          return this.a; // could be self, only differs in non-context use
      },
      c : {
          c1: function(){
               return self.a;
          }
      }
   };
})();

APP2 = APP;
APP = null;
APP2.b();  // 1
APP2.c.c1(); // 1

answered Jul 29, 2011 at 12:52

davin

45.6k9 gold badges81 silver badges78 bronze badges

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

5 Comments

davin Over a year ago

@mykhal, there's no reason not to.

mykhal Over a year ago

var self = { ... }; return self would be clearer, wouldn't?

davin Over a year ago

@mykhal, If that's your personal taste, then go for it, I don't feel a need.

mykhal Over a year ago

ok, from some point of view, the assignment is just a side-effect of an assignment expression :)

Eugene Over a year ago

JSLint scolds on such structure ;) Version with var self = {...}; return self is clearer because in the end of function there are fewer brackets (less chances to make a syntax mistake)

Mike Thomsen · Accepted Answer · 2011-07-29 12:54:30Z

2

Two other ways of writing it:

function App() {
    var that = this;
    this.a = 1;
    this.b = function() {
        return this.a();
    };
    this.c = {
        c1: function() {
            return that.a;
        }
    }
}

function App2() {
    var app = {
        a : 1,
        b : function(){
            return this.a;
        },
        c : {
            c1: function(){
                alert(app.a);
            }
        }
    };
    return app;
}

answered Jul 29, 2011 at 12:54

Mike Thomsen

37.7k11 gold badges63 silver badges86 bronze badges

1 Comment

mykhal Over a year ago

i was slower (but independent), buy you have forgotten to mention, how to instantiate an app.. :)

mykhal · Accepted Answer · 2011-07-29 12:57:59Z

1

you can use more javascriptous way to do that:

var App = function() {
    var that = this;
    this.a = 1;
    this.b = function(){
        return this.a;
    };
    this.c = {
        c1: function(){
             return that.a;
        }
    }
}

var app1 = new App();

...

answered Jul 29, 2011 at 12:57

mykhal

20.1k11 gold badges84 silver badges84 bronze badges

Collectives™ on Stack Overflow

Javascript `this` in objects-in-objects?

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related