How do you access the main obj from obj.foo.bar in javascript?

Question

Objects in javascript throw me for a loop!

In this set up...

var obj = {
    someVar: "my awesome variable",
    foo: {
        bar: function(){
            alert(this.someVar);
        }
    }
};

How would I get obj.foo.bar to correctly alert the value of someVar?

Answer 1

Using a captured obj:

var obj = {
    someVar: "my awesome variable",
    foo: {
        bar: function(){
            alert(obj.someVar);
        }
    }
};

Answer 2

alert(obj.someVar);

There's no clever way to walk up the ancestor chain. Objects don't know where they're contained, if you're looking for some type of this.parent type of notation. There's nothing to say that an object even has a single "parent".

foo.foo = new Object();
bar.bar = foo.foo;

bar.bar.parent == ???

Answer 3

A function in Javascript is invoked only in the context of the object which the . operator was applied to. It is not possible to walk up the chain, since Javascript objects are not intrinsically aware of their parent objects.

The only way to do this is to have a separate reference to obj. (Either as a property of bar or a separate variable)

Answer 4

Here's a generalized pattern I just cooked up for upwards traversal. Depending on your needs/assumptions, you can probably drop some complexity.

var obj = (function (parent) {
    var obj = {
        foo: "foo",
        up: function () {
            return parent;
        }
    };

    obj.bar = (function (parent) {
        var obj = {             
            baz: function () {
                alert(this.up().foo);
            },
            up: function () {
                return parent;
            }
        };

        return obj;
    }(obj));

    return obj;
}(window));

obj.bar.baz(); // "foo"

It's almost certainly more trouble than it's worth.