I need to call a parent property from child object in an object literal

Question

I tried to call from child object a parent attribute

var parentObj = {  
   attr1:1,  
   attr2:2,   
   childObj:{  
      method1:function(){  
         return this.attr1 * this.attr2;  
      }  
   }  
}

but it doesn't work.

FYI: What you're showing are javascript object literals. This isn't json data. — user113716, Feb 03 '11 at 22:03

score 30 · Accepted Answer · answered Feb 03 '11 at 22:03

30

Try referencing parentObj directly:

var parentObj = {  
   attr1: 1,  
   attr2: 2,   
   childObj: {  
      method1: function () {  
         return parentObj.attr1 * parentObj.attr2;  
      }  
   }  
}

answered Feb 03 '11 at 22:03

Emmett

14,035
12
56
81

score 28 · Answer 2 · edited Feb 03 '11 at 22:09

28

This can be done with the power of closures!

var Construct = function() {
    var self = this;    

    this.attr1 = 1;
    this.attr2 = 2;
    this.childObj = {
        method1: function () {
            return self.attr1 * self.attr2
        }
    }
}


var obj = new Construct();

edited Feb 03 '11 at 22:09

Matt Ball

354,903
100
647
710

answered Feb 03 '11 at 22:08

Raynos

166,823
56
351
396

1

@Matt: Just FYI, the `()` are optional with `new`. :o) – user113716 Feb 03 '11 at 22:18
1

@patrick: I know that. However, I think it's poor style, and [I'm not the only one](http://stackoverflow.com/questions/3034941/new-myclass-vs-new-myclass). I see no good reason for this sort of language "feature." – Matt Ball Feb 03 '11 at 22:19
@Matt: Alright. It would be a good idea to note that in the *Edit Summary*, especially when it is a personal style edit. – user113716 Feb 03 '11 at 22:25
1

@patrick: fair 'nuff. I'm usually pretty lazy about edit comments, clearly I should work on that. – Matt Ball Feb 03 '11 at 22:32

score 21 · Answer 3 · answered Apr 16 '12 at 11:33

21

var parentObj = {  
    attr1:1,  
    attr2:2,   
    childObj:{  
       method1:function(){  
          return this.parent.attr1 * this.parent.attr2;  
       }  
    },  
    init:function(){
       this.childObj.parent = this;
       delete this.init;
       return this;
    }  
}.init();

answered Apr 16 '12 at 11:33

Mik

2,884
2
19
10

1

Why do you `delete this.init`? – Banago Dec 02 '14 at 13:39
3

It's just cleanup so when you get your object back, it doesn't have a useless init function that was only used at object creation. – Jan 23 '17 at 22:16

score 9 · Answer 4 · answered May 16 '15 at 19:45

This is an another approach without referencing the parent object's name.

var parentObj = {
    attr1: 1,
    attr2: 2,
    get childObj() {
        var self = this;
        return {
            method1: function () {
                return self.attr1 * self.attr2;
            }
        }
    }
}

Can be accessed as:

parentObj.childObj.method1(); // returns 2

Banago · Answer 5 · 2015-01-26T09:20:06.130

There is a problem with referencing parent object my name because it breaks the app in case you rename it. Here is nicer approach, which I use extensively, where you pass the parent as an argument to the child init method:

var App = { 
  init: function(){    
    this.gallery.init(this);   
  },

  somevar : 'Some Var'
}

App.gallery = {
  init: function(parObj){
    this.parent = parObj;
    console.log( this.parent.somevar );  
  }

}

App.init();

I need to call a parent property from child object in an object literal

5 Answers5

Linked