Javascript, inner classes, and how to access parent scope efficiently

Question

In Javascript, I would like to define a class with an inner (or nested) class. Within the inner class I'd like to be able to get access to the parent instance. How can I do this efficiently?

Some code will show what I mean. Suppose I define a class, MyType1, which exposes several properties and one function, SayHello:

(function(){
    MyType1 = function(name){
        this.TypeName = "MyType1";
        this.Name = name;
    };

    MyType1.prototype.SayHello = function() {
        say(this.Name + " says hello...");
    };
})();

Ok, now, starting from there, I want to add an "inner class" to MyType1, so I add some new code so that it looks like this:

(function(){
    MyType1 = function(name){
        this.TypeName = "MyType1";
        this.Name = name;
        var parentName = name;
        this.Child = function(name) {
            this.Description = parentName + "'s child, " + name;
        };

        this.Child.prototype.Introduce = function() {
            say(this.Description + ", greets you...");
        };
    };

    MyType1.prototype.SayHello = function() {
        say(this.Name + " says hello...");
    };
})();

Now I can use these classes like this:

var x = new MyType1("Victor");
x.SayHello();

var c = new x.Child("Elizabeth");
c.Introduce();

---

that all works. But it defines a new Child function (or type, if you like) for every instance of MyType1. What I'd like to do is get access to the parent class scope, without resorting to that inefficiency. Something like this:

(function(){
    MyType2 = function(name){
        this.TypeName = "MyType2";
        this.Name = name;
        this.Prop1 = 1872;
        var parentName = name;
    };

    MyType2.prototype.SayHello = function() {
        say(this.Name + " says hello...");
    };

    var c1 = function(name) {
        this.Description = parentName + "'s child, " + name;
        //                ^^ no go! ^^
    };

    c1.prototype.Introduce = function() {
        say(this.Description + ", greets you...");
    };

    MyType2.prototype.Child = c1;

})();

But, this doesn't work. The parentName var is out of scope, of course.

Is there an efficient way for the Child instance (in the constructor, or in any class function) to gain access to the parent (MyType2) instance?

---

I know that I could define the Child class to be an independent, non-nested class, then in the ctor for that, just pass the Parent instance. But this creates N references to the parent instance, one for every Child instance. That seems like an inefficiency I'd like to avoid.

thanks for any tips.

---

EDIT - the reason I want the Child to have access to the parent instance, is that the parent holds an object that is fairly expensive to create - something like a db connection - and I'd like the child to be able to utilize that thing.

Answer 1

It would probably help you out if you do away with notions like "type", "class", etc. when dealing with javascript. In javascript, there is no differentiation from "type", "class", "function", "instance", or "object" -- it's "object" all the way down.

Since every "type" is an "object" and is mutable, you get nothing of the sort of strong-typed efficiency gains you might get from Java or C++ by reusing a single type definition. Think of the "new" operator in javascript as something like "clone the definition and call the constructor", after which the definition of the instance could still be changed.

So go with your first, working example: you won't get any gains by doing something different.

Answer 2

This is what I came up after many hours:

var Parent = function() {
  this.name = "Parent";

  this.Child = Child;
  this.Child.prototype.parent = this;
}

var Child = function() {

}

var parent = new Parent();
var child = new parent.Child();

console.log(child.parent.name);

This way you can instantiate as many Parents as you want, with their Childs underneath, and every Child instance will have access to it's parent instance through the variable parent.

Answer 3

The only way I can think of is to pass in the parent object to the Child constructor:

MyType2.Child = function (parent, name) {
    this.parent = parent;
    this.name = name;
    this.Description = this.parent.name + "'s child, " + name;
};

And instantiate it with:

var x = new MyType2("Victor");

var c = new MyType2.Child(x, "Elizabeth");

My justification is that it makes more sense that the Child constructor is a "static" property of MyType2, instead of the instantiated object x in your example, since we are talking about types here, which are the same across all instances of MyType2.