Access Parent method from child Javascript

Question

How can I access baz() from inside the bar() function in the following code?

var obj = {
    baz : function(){ alert("Hi!"); },
    foo: {
        bar: function(){ 
            baz(); 
        }
    }
}

obj.baz will work in this simplified case

Jaromanda X
– Jaromanda X

2015-10-18 12:43:48 +00:00
Commented Oct 18, 2015 at 12:43 — Jaromanda X
– Jaromanda X, Commented Oct 18, 2015 at 12:43
That's not a "parent" in the OOP sense.

Bergi
– Bergi

2015-10-18 13:59:52 +00:00
Commented Oct 18, 2015 at 13:59 — Bergi
– Bergi, Commented Oct 18, 2015 at 13:59

Jeremy J Starcher · Accepted Answer · 2015-10-18 13:23:26Z

3

JavaScript doesn't have kind of a built-in parent reference because an object can be referenced by multiple 'parents' in what we call a many-to-one relationship.

As others have said, in this simplified case, simply calling obj.baz() will work.

In a more complicated case, you would have to manually build the object and track parenthood:

// Create the root object
var rootObject = {baz: function() {console.log('rootBaz');}}

// And the basic child
var childObject = {foo: function() {console.log('childFoo');}}

// Configure the parent
childObject.parent = rootObject;

// Add our call.
childObject.baz = function() {this.parent.baz()};

// Invoke and test
childObject.baz();

Which can be slightly simplified:

var rootObject = {
  baz: function() {console.log('rootBaz');}
};

var childObject = {
  foo: function() {console.log('childFoo');},
  baz: function() {this.parent.baz()}
};

childObject.parent = rootObject;
childObject.baz();

Updated per Sujet's comment

In addition, if you need to make sure that baz has the correct value for this you can use either call or apply.

  baz: function() {this.parent.baz.call(this.parent)}

If your code doesn't require this then I would recommend a straight function call per my original answer.

edited Oct 18, 2015 at 13:23

answered Oct 18, 2015 at 12:52

Jeremy J Starcher

24k6 gold badges56 silver badges75 bronze badges

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

2 Comments

user2226755 Over a year ago

Maybe explain call and apply function. stackoverflow.com/questions/17017115/javascript-call-function

Jeremy J Starcher Over a year ago

Thanks @HorsSujet. Done.

smnbbrv · Accepted Answer · 2015-10-18 12:44:31Z

1

Just use the object reference:

var obj = {
    baz : function(){ alert("Hi!"); },
    foo: {
        bar: function(){ 
            obj.baz(); 
        }
    }
}

answered Oct 18, 2015 at 12:44

smnbbrv

24.7k9 gold badges85 silver badges115 bronze badges

Comments

Jonjoe · Accepted Answer · 2015-10-18 12:45:08Z

0

You need to reference via object.property notation.

In your example you would get baz via:

obj.baz()

Some great resources for this:

answered Oct 18, 2015 at 12:45

Jonjoe

1718 bronze badges

Collectives™ on Stack Overflow

Access Parent method from child Javascript

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related