CODEWITHSUNDEEP
javascript
Jerry
Jerry

Reputation: 927

How to access parent object's other properties without accessing parent reference directly in JavaScript?

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?

Upvotes: 0

Views: 164

Answers (3)

user1329482
user1329482

Reputation: 569

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.

Upvotes: 0

qiu-deqing
qiu-deqing

Reputation: 1333

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/

Upvotes: 1

Benjamin Gruenbaum
Benjamin Gruenbaum

Reputation: 276406

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.

Upvotes: 2

Related Questions