JavaScript access parent object attribute

Question

I have a small issue in JS, I have two nested objects, and I would like to access a variable from the parent, like so:

var parent = {
    a : 5,

    child: {
        b : 3,
        displayA : function(){
            console.log(this.a);
            //undefined
            },

        displayB : function(){
            console.log(this.b);
            //displays 3
            }
        }
}

And I would just like to know how to make parent.child.displayA work :) (I have sub-objects that need access to a parent's variable)

Any help appreciated Thank you very much!

Answer 1

You can use super.prop to access parent class properties. Of course, only if you are using ES6.

Answer 2

In your example you haven't inheritance. You may do this

...
    displayA : function(){
        console.log(parent.a);
        // 5
    },
...
parent.child.parent = parent;
parent.child.displayA();

Answer 3

There is no general way for the object child to know that it is a member of the parent object. In your situation, you can make a direct reference to the parent object in displayA(), like so:

displayA : function(){
  console.log(parent.a);
}

You do not need to place parent in the global scope and use window.parent as another answer suggests; since you are declaring displayA within the scope of parent, the function will close over parent, and it will be accessible anywhere within child. Since the closure contains a reference to the parent object, you will see that changes to parent will be reflected in the behaviour of displayA. For example, suppose parent and child are defined as in your example, except displayA is modified to use parent.a. Then:

parent.child.displayA(); //=> 5
parent.a = 10;
parent.child.displayA(); //=> 10

All this being said, if you are trying to mimic OOP, then the other answer is right: you should read more about how the Javascript prototype chain works.

Answer 4

You can use call to set the value of this:

parent.child.displayA.call(parent); // 5

You may also be interested in binding it:

parent.child.displayA = function(){
  console.log(this.a);
}.bind(parent);
parent.child.displayA(); // 5

Or you you can just use parent instead of this:

parent.child.displayA = function(){
  console.log(parent.a);
};
parent.child.displayA(); // 5

Answer 5

Javascript is prototype based, it is not a regular OOP language like PHP or Java.

Take a look to Inheritance and the prototype chain and implement something like Simple Javascript inheritance.

You could probably access to parent through window.parent if it is in the global scope, but your example will not work in every case.

Answer 6

I think it doesn't really make sence to do it like that since you can access child object only through its parent. so why add a mthod displayB to the child while you can add it to the parent which has access to all child properties.