OOP, object literal notation, and the 'new' operator

[isporter]

How do you have multiple child objects of a parent object? Consider the following object declaration:

var parent={
childCount: 0,
child: {
id:false,
init: function() {
alert(this.id);
parent.childCount++;
this.id = parent.childCount;
alert("Child " + this.id + " Created");
}
}
}

Calling 'parent.child.init();', the first alert produces 'undefined' and the second 'Child 1 Created'. A second call to 'parent.child.init();' produces the '1' from above instead of the 'undefined' I'm expecting - I realise this is because I'm working with the same object.

However, calling 'var firstChild = parent.child.init(); var secondChild = parent.child.init()' produces the same result (as does 'var firstChild = parent.child; firstChild.init().

I've also tried the 'new' operator. But the code 'var firstChild = new parent.child;' produces the error 'parent.child is not a constructor'.

How is this supposed to work?

Thanks,
Iain

 

[BabyJeffy]

I think you will find that parent is a reserved word in javascript. Try using another name for your object.

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler

http://www.coderambler.com/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

 

[isporter]

parent is not a reserved word, although apparantly it is best to avoid it, as it may be a name of a client-side object, method, or property in Netscape Navigator or Internet Explorer (

http://www.javascripter.net/faq/reserved.htm).

However, if I change the identifier, I still don't understand the issue I described, as this does not solve the problem. Any further thoughts?

Thanks,
Iain

 

[adam0101]

If you just want your 'parent' object to be an Object Factory that only creates 'child' objects, you can use this:

var parent={
   childCount: 0,
   createChild: function() {
     return {id: ++parent.childCount}
   }
}

[tt]var firstChild = parent.createChild();
var secondChild = parent.createChild();[/tt]

But if you want your parent object to act as a collection, you can use this:

var parent={
   children: [],
   addChild: function() {
     var child = {
       id: parent.children.length + 1
     }
     parent.children[parent.children.length] = child;
     return child;
   }
}

[tt]var firstChild = parent.addChild();
var secondChild = parent.addChild();[/tt]

Personally, I only use this notation for lightweight Data Transfer Objects and opt to declare my big classes like this:

var [b]Parent[/b] = function(){
  this.Children = [];
  this.AddChild = function(){
    var id = this.Children.length + 1;
    var child = new Child(id);
    this.Children[this.Children.length] = child;
    return child;
  }
}

var [b]Child[/b] = function(id){
  this.id = id;
}

[tt]var p = new Parent();
var firstChild = p.AddChild();
var secondChild = p.AddChild();[/tt]

Adam

http://adameslinger.blogspot.com/

 

[isporter]

Adam, cheers for responding to my question. I'm not entirely sure what I want, but let me explain:

I have an application, with various functionalities. Thus, I have:

application={
interfaceCount:0,
init: function() {
}
registration: {
init: function() {
}
submit: function() {
}
etc.
}
login: function() {
etc.
}
interfaceX: {
id: false,
init: function() {
}
etc.
}
}

What I want to do is allow myself to create several interfaceX's on a page. This interface will have a number of functions to update it's contents via AJAX. So is it a collection (of interfaces) I want?

I've been reading

http://www.dustindiaz.com/json-for-the-masses/,

and found that this code appears to work:

var parentObj={
childObjCount: 0,
childObj: function () {
return {
id: false,
init:function(){
parentObj.childObjCount++;
this.id = parentObj.childObjCount;
}
}
}
}
var child1 = new parentObj.childObj;
child1.init();
var child2 = new parentObj.childObj;
child2.init();
alert(child1.id);
alert(child2.id);

What do you think of this solution? Because another option appears to be Classier JSON:

http://www.thomasfrank.se/classier_json.html

- where you appear to do:

var parentObj={
childObjCount: 0,
childObj: {
id: false,
init:function(){
parentObj.childObjCount++;
this.id = parentObj.childObjCount;
}
}.jsonClass()
}

I'm not sure how to evaluate the options - can you help?

 

[adam0101]

Your first example will do what you're asking. The second one looks like it would only create one child object.

Adam

http://adameslinger.blogspot.com/