Calling parent attribute and functions in javascript?

Question

How do I call parent object attribute and functions in javascript? For example, if I had an object gen0 with a child object gen1 which had a child object gen2. How would gen1 call its parents names and functions? How would gen2 call its parents and grandparents functions (without using prototypes)?

gen0 = {
    name: "gen0",
    gen0Func: function() {
        console.log("gen0Func");
        console.log("My name is " + this.name);
    },
    gen1: {
        name: "gen1",
        gen1Func: function() {
            console.log("gen1Func");
            console.log("My name is " + this.name);
            console.log("My parents name is " + this.parent.name); // Doesn't work.
        },
        gen2: {
            name: "gen2",
            gen2Func: function() {
                console.log("gen2Func");
                console.log("My name is " + this.name);
                console.log("My parents name is " + this.parent.name); // Doesn't work.
                console.log("My grandparents name is " + this.parent.parent.name); // Doesn't work.

            }  
        }
    }
}

You don't. An object can be the child of multiple objects, there's no link that goes up. — Barmar, Mar 04 '18 at 06:20
Possible duplicate of [access parent object in javascript](https://stackoverflow.com/questions/1789892/access-parent-object-in-javascript) — Bhojendra Rauniyar, Mar 04 '18 at 06:22
Please learn about Prototypal Inheritance https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Inheritance — Randy Casburn, Mar 04 '18 at 06:27

score 3 · Accepted Answer · answered Mar 04 '18 at 06:24

There's nothing that automatically links objects back to the objects that contain references to them. If you want that, you need to do it explicitly in your code.

gen0 = {
    name: "gen0",
    gen0Func: function() {
        console.log("gen0Func");
        console.log("My name is " + this.name);
    },
    gen1: {
        name: "gen1",
        gen1Func: function() {
            console.log("gen1Func");
            console.log("My name is " + this.name);
            console.log("My parents name is " + this.parent.name); // Doesn't work.
        },
        gen2: {
            name: "gen2",
            gen2Func: function() {
                console.log("gen2Func");
                console.log("My name is " + this.name);
                console.log("My parents name is " + this.parent.name); // Doesn't work.
                console.log("My grandparents name is " + this.parent.parent.name); // Doesn't work.

            }  
        }
    }
}

gen0.gen1.parent = gen0;
gen0.gen1.gen2.parent = gen0.gen1;

gen0.gen1.gen2.gen2Func();

score 2 · Answer 2 · answered Mar 04 '18 at 06:34

You should approach this in a different way. One way I would do this, is to use classes and objects with relations (parent, children, etc)..

class Gen {
 constructor(name,parent) {
  this.name = name;
  this.parent = parent;
 }
 
 sayHi() {
  console.log('Hi!.. I am ' + this.name);
 }
 
}

var gen0 = new Gen('gen0');
var gen1 = new Gen('gen1',gen0);
var gen2 = new Gen('gen2',gen1);

gen0.sayHi(); // Hi!.. I am gen0
gen1.sayHi(); // Hi!.. I am gen1
gen1.parent.sayHi(); // Hi!.. I am gen0
gen2.parent.parent.sayHi(); // Hi!.. I am gen0

score 1 · Answer 3 · answered Mar 04 '18 at 06:34

var gen0 = {
    name: "gen0",
    gen0Func: function() {
        console.log("gen0Func");
        console.log("My name is " + this.name);
    },
    gen1: {
        name: "gen1",
        gen1Func: function() {
            console.log("gen1Func");
            console.log("My name is " + this.name);
            console.log("My parents name is " + this.parent.name);
        },
        gen2: {
            name: "gen2",
            gen2Func: function() {
                console.log("gen2Func");
                console.log("My name is " + this.name);
                console.log("My parents name is " + this.parent.name); // Doesn't work.
                console.log("My grandparents name is " + this.parent.parent.name);

            }  
        }
    },
    init: function() {
       this.gen1.parent = this;
       this.gen1.gen2.parent = this.gen1;
       return this;
    }
}.init();

gen0.gen1.gen1Func();
gen0.gen1.gen2.gen2Func();

score 0 · Answer 4 · answered Mar 04 '18 at 06:26

gen0 = {
    name: "gen0",
    gen0Func: function() {
        console.log("gen0Func");
        console.log("My name is " + this.name);
    },
    gen1: {
        name: "gen1",
        gen1Func: function() {
            console.log("gen1Func");
            console.log("My name is " + this.name);
            console.log("My parents name is " + gen0.name); // Doesn't work.
        },
        gen2: {
            name: "gen2",
            gen2Func: function() {
                console.log("gen2Func");
                console.log("My name is " + this.name);
                console.log("My parents name is " + gen0.gen1.name); // Doesn't work.
                console.log("My grandparents name is " + gen0.name); // Doesn't work.

            }  
        }
    }
}

gen0.gen1.gen2.gen2Func();

Calling parent attribute and functions in javascript?

4 Answers4