What is the correct prototype affectation in javascript inheritance?

Question

I read several articles on js inheritance already (this one, this one, this one, etc.)

In this article from Mozilla, "classic" inheritance is shown as this : (I uniformized examples)

// inherit Base
function Derived() { ... }
Derived.prototype = new Base();            <-------
Derived.prototype.constructor = Derived;   <-------

However in this article I see :

// inherit Base
function Derived() { ... }
Derived.prototype = Object.create(Base.prototype);    <-------
Derived.prototype.constructor = Derived;

Moreover I have also seen this :

Derived.prototype = Base.prototype;

And I also experimented and couldn't find the use of constructor affectation :

Derived.prototype.constructor = Derived; <--- it still work if I skip this line

if I skip this line, new Derived() correctly calls Derived() anyway.

So 1) what is correct :

Derived.prototype = new Base();
Derived.prototype = Object.create(Base.prototype);
Derived.prototype = Base.prototype;
other ?

And 2) is Derived.prototype.constructor = Derived; really needed ? Why ?

that's the thing about javascript, you can do what you like.. I like John Resig's class.js way of wrapping the prototype nonsense for you, so that you never have to see it in your code.ejohn.org/blog/simple-javascript-inheritance — andygoestohollywood
– andygoestohollywood, Commented Dec 13, 2013 at 15:52
Object.create() is a relatively recent command which did not exist previously. See developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… (the browser compatibility overview is at the bottom of that page). If you use only browsers that have it, use it, otherwise don't - how's that for a ridiculously obvious piece of advice? :) — John Smith
– John Smith, Commented Dec 13, 2013 at 15:53
This question is similar to: How should the `.prototype` property be set up in a derived old-style constructor?. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem. — dumbass
– dumbass, Commented Dec 31, 2024 at 14:38

Community · Accepted Answer · 2017-05-23 12:24:08Z

Derived.prototype = new Base();

This does call the Base constructor just for setting up the prototype chain. While sometimes working and giving equivalent results to Object.create, it is error-prone and should be avoided. Read What is the reason to use the 'new' keyword at Derived.prototype = new Base (and why it should not be used).

Derived.prototype = Object.create(Base.prototype);

This is state of the art - Correct javascript inheritance so to say.

Derived.prototype = Base.prototype;

This is plain wrong. Do not use. It lets Base and Derived instances inherit from the same object - while it (seldom) can be helpful to have multiple constructors for a "class", this is not "subclassing".

Is Derived.prototype.constructor = Derived; really needed? Why?

It can be omitted and your script will work nonetheless, but for convenience you would expect that (new Derived).constructor === Derived. Also have a look at JavaScript inheritance and the constructor property

Community · Accepted Answer · 2017-05-23 12:07:52Z

1

What is the correct way to do classical inheritance in JavaScript

In this answer i explained the difference between 1 and 2 showing why 2 is the best way to emulate classical inheritance in JavaScript.

In short, in solution 1 children inherit from an instance of the parent. In solution 2 the class of the children (Derived.prototype) inherits from the class of the parent(Base.prototype). This imposes severe limitations on the parent, because it must be called with 0 arguments.

The 3rd solution is even worse because the prototypes of the Derived and the Base class are the same object, so no method overriding can take place. Even worse, a method defined in Derived.prototype will be available for all Base instances and if a method with the same name had been declared on Base.prototype, it would simply be replaced.

Conclusion: 2 is the true way to do classical inheritance in JavaScript.

Is setting the constructor property needed

Setting the constructor property on the prototype makes it accessible to all instances. That is simply for convenience, the inheriting part works without it.

edited May 23, 2017 at 12:07

CommunityBot

11 silver badge

answered Dec 13, 2013 at 15:56

Tibos

27.9k4 gold badges56 silver badges66 bronze badges

1 Comment

Offirmo Over a year ago

Enlightening. Would you mind helping with the 2nd part of the question as well ?

Collectives™ on Stack Overflow

What is the correct prototype affectation in javascript inheritance?

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related