0

This problem has been bothering me for a long time since I meet it in a project.

In JavaScript, it's easy to access a nested object through . notation. Is there any way to access parent object in a nested object?

Take a look at code below:

function Parent() {
  this.foo = new Foo;
  this.bar = new Bar;
}

function Foo () {
  this.sayHi = function () {
    console.log('Hello World');
  }
}

function Bar() {
  this.callFoosMethod = function () {
    // should call object foo's sayHi method and log 'Hello World'
  }
}

var parent = new Parent;
parent.bar.callFoosMethod(); // => should log 'Hello World'

parent has two child objects foo and bar, and in bar object's callFoosMethod, I need to access parent's foo object's sayHi method, but the foo nesting in parent knows nothing about its parent object.

Is there any way to access parent object in a nested object Or there is actually no solution to this problem in JavaScript?

3 Answers 3

2

No, there is not.

There is a composition relation. If you want to access the 'parent' you have to pass a reference explicitly. That's practice.

Now a word about "why":

A 'sub object' can be a sub-object of multiple objects:

var parent = new Parent;
var o = parent.bar;
o.bar.callFoosMethod(); // but o doesn't have a foo

This also creates issues with architecture. Circular structures are generally bad and the way objects communicate has to be as straightforward as possible.

If they need to talk it has to be through the parent, the Bar is not even aware of the fact there is a Foo there.

Workarounds


Although this is bad practice (high coupling, wrong place for responsibility, etc) if you must you can do:

function Parent() {
  this.foo = new Foo(this);
  this.bar = new Bar(this);
}

function Foo (parent) {
  this.sayHi = function () {
    console.log('Hello World');
  }
}

function Bar(parent) {
  this.callFoosMethod = function () {
       parent.foo.sayHi(); // BAD DESIGN WARNING!
  }
}

Again, this is really bad design. It completely violates the single responsibility principle, separation of concerns and clear communication. It generally indicates a design problem. Avoid it unless you're absolutely sure it's what you need.

1
  • (Side note: You can also hack around this by a proxy or a getter but they are even worse since they are even less explicit here) Dec 19, 2013 at 11:46
1

you can modify your function callFoosMethod to accept Foo object as an argument. then invoke the

sayHi in it.

function Parent() {
  this.foo = new Foo;
  this.bar = new Bar;
}

function Foo () {
  this.sayHi = function () {
    console.log('Hello World');
  }
}

function Bar() {
  this.callFoosMethod = function (obj) {
    // should call object foo's sayHi method and log 'Hello World'
      obj.sayHi();
  }
}

var parent = new Parent;
parent.bar.callFoosMethod(parent.foo); // => should log 'Hello World'

demo: http://jsfiddle.net/RgTLP/

0

I agree with Benjamin; if you need to do Foo things from Bar, why isn't Foo a member of Bar? If the parent class needed to execute a Foo method, it could do so via Bar, rather than making Bar too aware of where it stands in the hierarchy.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.