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 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 2

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

Answer 3

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 4

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 5

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.

Answer 6

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();