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!

In the displayA function, you're referencing "this" and attempting to access its "a" attribute. The call to "this" here refers to the child object and not the parent. If you used a constructor you could pass in the context (this) of its parent to the child object. Or you could use the call or bind methods. — chRyNaN
– chRyNaN, Commented Apr 19, 2015 at 19:32

Oriol · Accepted Answer · 2015-04-19 19:31:52Z

11

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

edited Apr 19, 2015 at 19:31

answered Apr 19, 2015 at 19:25

Oriol

291k71 gold badges459 silver badges535 bronze badges

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

Comments

Dmytro Medvid · Accepted Answer · 2016-12-27 13:56:20Z

7

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

answered Dec 27, 2016 at 13:56

Dmytro Medvid

5,2683 gold badges27 silver badges29 bronze badges

Comments

Falc · Accepted Answer · 2015-04-19 19:04:34Z

1

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.

answered Apr 19, 2015 at 19:04

Falc

5951 gold badge5 silver badges15 bronze badges

Comments

Matt Wetmore · Accepted Answer · 2015-04-19 19:11:14Z

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.

Mostafa EL BARRAK · Accepted Answer · 2015-04-19 19:17:17Z

0

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.

answered Apr 19, 2015 at 19:17

Mostafa EL BARRAK

1464 bronze badges

Comments

tutankhamun · Accepted Answer · 2015-04-19 19:32:39Z

0

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

answered Apr 19, 2015 at 19:32

tutankhamun

9302 gold badges11 silver badges23 bronze badges

Collectives™ on Stack Overflow

JavaScript access parent object attribute

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related