Access object in array which is a property of another object - Javascript

Question

It's been a long time since I learned OOP and I'm new to JS, so things might look weird for more advanced users - sorry :)

function page(title) {
    this.subPages = [];
    this.title = title;
}
page.prototype.addToSubPages = function(subPage) {
    this.subPages.push(subPage);
}
page.prototype.getSubPages = function() {
    return this.subPages;
}

Now I create 2 objects:

startPage = new page("start");
somePage  = new page("foo");

...and try to add somePage into the array in startPage:

startPage.addToSubPages(somePage);

Now this doesn't seem to work, although it should be correct, if I'm not mistaken.

console.log(startPage.getSubPages());

This shows me that something is in the array, but the object appears to be empty. What am I doing wrong? Also: How would I access a certain element in that array? Like this: startPage.getSubPages()[0].getFoo();?

Edit: Holy Mackerel, Batman! This is more like my actual code: http://jsfiddle.net/pZHKS/2/ You're all right, the code I posted actually works. As soon as inheritance comes into play, it doesn't work anymore. Why, though? It should work exactly like the code above, right?

What makes you think this is broken? It works for me? jsfiddle.net/pZHKS, jsfiddle.net/pZHKS/1 — Matt
– Matt, Commented Feb 20, 2012 at 15:33
console.log(startPage.subPages[0].title); Also avoid useless code like getX() that's a Java anti-pattern. — Raynos
– Raynos, Commented Feb 20, 2012 at 15:34
@Raynos: I'm not sure it's an anti-pattern. Encapsulation is useful (and has been useful to me in the wild) in JavaScript as well. — Matt
– Matt, Commented Feb 20, 2012 at 15:37
@Matt If by useful you mean a waste of computation, then yes. see The cost of privacy — Raynos
– Raynos, Commented Feb 20, 2012 at 15:42
@Raynos The article linked refers to the complications that arise from improper understanding of javascript scope and creating anonymous closures as abstractions around private data all while not understanding the inner workings of frameworks you may be abstracting. The only reason I mention this is because I did not take away at all that there is a detrimental effect to using a getter/setter level of encapsulation on javascript objects. — Quintin Robinson
– Quintin Robinson, Commented Feb 20, 2012 at 16:09

Raynos · Accepted Answer · 2012-02-20 16:11:11Z

2

function page(title) {
    this.title = title;
}

function subPage() {
    this.contentPages = [];
}
subPage.prototype = new page;

There are two problems.

your not calling page in subPage.
your using Child.prototype = new Parent; that's wrong, use Object.create instead

So the fixed code would be.

function page(title) {
    this.title = title;
}

function subPage(title) {
    page.call(this, title);
    this.contentPages = [];
}
subPage.prototype = Object.create(page.prototype);

answered Feb 20, 2012 at 16:11

Raynos

170k57 gold badges359 silver badges399 bronze badges

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

1 Comment

Raynos Over a year ago

ES5-shim should be used for oldIE support. Or some other kind of Object.create shim

Collectives™ on Stack Overflow

Access object in array which is a property of another object - Javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related