Javascript object as parent for another js object

Question

Could you explain me how to do in JavaScript such thing :

Create one object.
Create second object.
Set first object as a parent to second object.
Add second object as child to first object.

It sounded simple to me as Java developer but I am confused right now.

Demo:

var childFunction = function(parent){
    this.parent = parent;
    this.value = 14;
    this.fun = function(){
        document.getElementById("test").innerHTML=parent.value;
    };
    this.setParent = function(parent){
        this.parent = parent;
    }
}

var parentFunction = function(){
    this.value=20;
    this.child=''; 
    
    this.addChild = function(child){
        child.setParent(this);
        this.child=child; 
    }
    
    this.setchild = function(child){
        this.child = child;
    }
    this.createChild= function(){
        this.child = new childFunction(this);
    }
}


var par = new parentFunction();
var ch = new childFunction('');
//par.setchild(new childFunction(par));
//par.createChild();
par.addChild(ch);

par.child.fun();

<div id="test"></div>

Check what this references in each case, you might be surprised. — Etheryte
– Etheryte, Commented May 9, 2015 at 9:18

Axel Amthor · Accepted Answer · 2015-05-09 09:25:56Z

2

It's working as of this fiddle as soon as you change:

 document.getElementById("test").innerHTML=this.parent.value;

answered May 9, 2015 at 9:25

Axel Amthor

11.1k1 gold badge28 silver badges45 bronze badges

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

Comments

Davin Tryon · Accepted Answer · 2015-05-09 09:29:13Z

The current code does not pass the parent to the child in the child's constructor.

As @Axel point's out in his answer, the cause of the issue is that the variable parent is not bound to anything, unless you pass in a parent in the constructor's parameter named parent. By passing in parent in the child's constructor, you create a closure for this line:

document.getElementById("test").innerHTML=parent.value;

This has been fixed below:

var childFunction = function(parent){
    this.parent = parent;
    this.value = 14;
    this.fun = function(){
        document.getElementById("test").innerHTML=parent.value;
    };
    this.setParent = function(parent){
        this.parent = parent;
    }
}

var parentFunction = function(){
    this.value=20;
    this.child=''; 
    
    this.addChild = function(child){
        child.setParent(this);
        this.child=child; 
    }
    
    this.setchild = function(child){
        this.child = child;
    }
    this.createChild= function(){
        this.child = new childFunction(this);
    }
}


var par = new parentFunction();
var ch = new childFunction(par);  //<-- pass parent in child constructor

par.addChild(ch);

par.child.fun();

<div id="test"></div>

Collectives™ on Stack Overflow

Javascript object as parent for another js object

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related