javascript: using inheritance "as is"

Question

I want to use some very simple inheritance in Javascript without any libraries (jQuery, Prototype, etc.) and I'm forgetting how to do this.

I know how to create a simple non-inherited object:

function Foo(x)
{
    this.x = x;
}
Foo.prototype = {
    inc: function() { return this.x++; }
}

which I can then use as follows:

js>f1=new Foo(0)
[object Object]
js>f1.inc()
0
js>f1.inc()
1
js>f1.inc()
2

But how would I add a subclass with one additional method that inherits the Foo "inc" method, without changing the Foo class?

function Bar(x)
{
    this.x = x;
}
Bar.prototype = new Foo();
Bar.prototype.pow = function(y) { return this.x+"^"+y+"="+Math.pow(this.x,y); }

That seems right except for this weirdness with the constructor; I have to call the Foo constructor once to create the Bar prototype, and when Bar's constructor is called, it seems like there's no way to call the Foo constructor.

Any suggestions?

In cases like these I tend to move the "constructor code" to an init function. Of course, you could use apply on the previous constructor (using the new Bar object as the context) as well to to mimic base() (C#) or super() (Java). — user166390
– user166390, Commented Mar 22, 2012 at 18:50
like this? it doesn't seem to work. function Bar(x) { this.constructor.prototype.constructor.apply(this,[x]); } — Jason S
– Jason S, Commented Mar 22, 2012 at 18:53

hugomg · Accepted Answer · 2012-03-22 19:33:01Z

1

The trick is to use Object.create instead of doing new Foo(). It will also create a new object inheriting from Foo.prototype but without calling the Foo constructor.

Bar.prototype = Object.create(Foo.prototype);

While Object.create might not be defined on older browsers, it is possible to define it yourself if you need to. (the following code is from the MDN link)

if (!Object.create) {  
    Object.create = function (o) {  
        if (arguments.length > 1) {  
            throw new Error('Object.create implementation only accepts the first parameter.');
            //tbh, the second parameter is for stuff you dont need right now.
        }  
        function F() {}  
        F.prototype = o;  
        return new F();  
    };  
}

edited Mar 22, 2012 at 19:33

answered Mar 22, 2012 at 19:26

hugomg

70.4k30 gold badges168 silver badges257 bronze badges

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

Comments

JotaBe · Accepted Answer · 2012-03-22 19:01:39Z

0

You can use this code. It does exactly what you do, which is the only way I know to inherit, but this function uses create, which is new in ECMAScritp 5, if it's available, and does some extra checking:

function inherit(p) {
if (p == null) throw TypeError(); // p must be non-null
if (Object.create) // If Object.create() is defined (ECMAScript 5 way)
return Object.create(p); // use it
var t = typeof p; // If not, do some more checking (the old way)
if (t !== "object" && t !== "function") throw TypeError();
function f() {}; // Define constructor
f.prototype = p; // Set prototype to p.
return new f(); // call constructor f() to create an "heir" of p
}

answered Mar 22, 2012 at 19:01

JotaBe

39.3k9 gold badges102 silver badges121 bronze badges

Collectives™ on Stack Overflow

javascript: using inheritance "as is"

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related