CODEWITHSUNDEEP
javascriptoopobject
Jo Colina
Jo Colina

Reputation: 1924

JavaScript access parent object attribute

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!

Upvotes: 10

Views: 18161

Answers (6)

Dmytro Medvid
Dmytro Medvid

Reputation: 5228

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

Upvotes: 7

tutankhamun
tutankhamun

Reputation: 920

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

Upvotes: 0

Oriol
Oriol

Reputation: 288260

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

Upvotes: 11

Mostafa EL BARRAK
Mostafa EL BARRAK

Reputation: 146

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.

Upvotes: 0

Matt Wetmore
Matt Wetmore

Reputation: 300

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.

Upvotes: 0

Falc
Falc

Reputation: 595

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.

Upvotes: 1

Related Questions