JavaScript prototypal inheritance

Question

I'm trying to inherit the methods of one object into another.

I've got the base object , which is implemented using the Revealing Module Pattern.

Page = function(url) {
    ...
    return { something: something_I_defined_above }
    ...
}

The other object where Page should inherit from is defined as a singleton. In the actual file Page is defined before Link is.

Link = function() {
   this.add = function() {}

   var instance = this;

   Link = function() { return instance; }
}

Next I want Page to inherit from Link.

Page.prototype = new Link();

When testing this code I get undefined for the p function:

var p = new Page();
// The following line return undefined.
p.add;

Felix Kling · Accepted Answer · 2011-07-14 22:24:05Z

3

You never really instantiate a Page object. All you do is returning a plain object literal when you call

Page = function(url) {
    ...
    return { something: something_I_defined_above }
    ...
}

var p = new Page();

This literal does not inherit from Page.prototype. There are some ways to solve this, mostly depending on how you want to structure your application.

For example, instead of letting Page inherit from Link (does this even make sense?) you can return an object that inherits from Link:

Page = function(url) {
    ...
    var Constr = function(){};
    Constr.prototype = new Link();
    var instance = new Constr();
    instance.something = something_I_defined_above;

    return instance;
    ...
}

var p = new Page();

I'm actually unsure what would be the best approach here. It really depends on what you want. My suggestion would to not make it too complicated.

edited Jul 14, 2011 at 22:24

answered Jul 14, 2011 at 22:18

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

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

7 Comments

Matt Over a year ago

The LInk object has similar problems. First time he calls it, it returns undefined.

Felix Kling Over a year ago

@Matt: Yes but it is called with new, so it will return this at the first call and instance on any subsequent call (with or without new).

Jonas Geiregat Over a year ago

I had my suspicions that the problem would be with the revealing module pattern. I can see why it doesn't work as I expected it to.

Matt Over a year ago

@Felix I had no idea that a 'new' call will return 'this' even in the absence of a return value. Intriguing.

Felix Kling Over a year ago

@Matt: Now you know :) If you call a function with new, this will refer to a new object that inherits from the functions prototype. If no object is explicitly returned by the function, this is returned implicitly. You can try to return a number or string and you will see that you get this nonetheless.

|

Collectives™ on Stack Overflow

JavaScript prototypal inheritance

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related