JavaScript Prototype Assignment

Question

What is the recommended approach/pattern for assigning an object's prototype? Assigning a reference to an already instantiated instance of 'super' function or initializing a new instance of 'super' for every 'sub' function? If, multiple approaches are commonplace; what are the pros/cons of each?

function SuperFoo(){ };
function Foo() {};
function Fooy() {};
function Fooimus() {};
function Foolacious() {};


/* Option 1: */ 
var proto = new SuperFoo();
Foo.prototype = proto;
Fooy.prototype = proto;
Fooimus.prototype = proto;
Foolacious.prototype = proto;


/* Option 2: */ 
Foo.prototype = new SuperFoo();
Fooy.prototype = new SuperFoo();
Fooimus.prototype = new SuperFoo();
Foolacious.prototype = new SuperFoo();

Crockford's write-up on this topic should be helpful to you: crockford.com/javascript/inheritance.html — Rob M.
– Rob M., Commented May 8, 2014 at 17:33
It depends on what you want to achieve. In this state, the question is too broad. — Artjom B.
– Artjom B., Commented May 8, 2014 at 17:36

The Spooniest · Accepted Answer · 2014-05-08 18:25:30Z

Multiple approaches are commonplace. But generally, what people actually want to do isn't actually covered by any of the solutions you list.

What you generally want from a subclass is a constructor whose prototype property is an object, which itself inherits from the prototype property of the superclass constructor. It's also a good idea to make sure that the prototype constructors match up properly: the prototype should have a constructor property that points back to its own class constructor. The result can look like this:

function SuperFoo() {};  // assuming that some prototype functions are already defined.

function Foo() {};
Foo.prototype = Object.create(SuperFoo.prototype);
Foo.prototype.constructor = Foo;

My usual solution nowadays is to wrap this rigamarole up into a function, like so:

Object.subclass = function (sub, sup) {
    sub.prototype = Object.create(sup.prototype);
    sub.prototype.constructor = sub;
};

function SuperFoo() {};  // assuming that some prototype functions are already defined.

function Foo() {};
Object.subclass(Foo, SuperFoo);

function Fooy() {};
Object.subclass(Fooy, SuperFoo);

function Fooimus() {};
Object.subclass(Fooimus, SuperFoo);    

function Foolacious() {};
Object.subclass(Fooalicious, SuperFoo);

Collectives™ on Stack Overflow

JavaScript Prototype Assignment

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related