Difference between Constructor pattern and Prototype pattern

Question

So I'm trying to wrap my head around the different ways to create an object.

I came accross the Protoype pattern for creating objects.

Now I wrote two functions below but I can't see what the functional difference between both would be? When would you use the Constructor pattern and when would you use the Prototype pattern?

Constructor Pattern

function Fruit(){}
Fruit.color = "Yellow",
Fruit.fruitName = "Banana",
Fruit.nativeTo = "SomeValue"

Prototype Pattern

function Fruit(){}
Fruit.prototype.color = "Yellow",
Fruit.prototype.fruitName = "Banana",
Fruit.prototype.nativeTo = "SomeValue"

I think one of the biggest difference is the ability to create a new instance of the Fruit with all its methods and properties using Prototype pattern. In your constructor example: If you try to create a new object for the Fruit like var x=new Fruit() and then try and access a property like x.color you will get undefined while doing the same in Prototype you will get "Yellow". — gothical
– gothical, Commented Jan 28, 2016 at 9:52

Community · Accepted Answer · 2017-05-23 12:17:59Z

20

Reusability of the components...

Constructor

When you create a new constructor you will create a new instance of everything and importantly any change made to the instances will only affect them and not the others.

Prototype

When you create a new object using the prototype it will reuse the logic and any change to the prototype chain will affect everyone else.

This is a nice explanation: Javascript prototypes and instance creation

When to use each pattern is based on needs - very ambiguous answer but never-the-less the situation.

Think of the Object, Function, Array they are used throughout JS and would make sense that they live on the prototype chain as any changes we have to them we would want to propagate - a side note: which is why we should never alter these as it can screw up their behavior.

Best explanation here: JavaScript constructors, prototypes, and the new keyword

edited May 23, 2017 at 12:17

CommunityBot

11 silver badge

answered Jan 28, 2016 at 9:45

Sten Muchow

6,7314 gold badges38 silver badges46 bronze badges

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

2 Comments

Marco Geertsma Over a year ago

Thanks for taking the time to answer my question. You last link looks really promising. Ill defenitly take a look at it!

Sten Muchow Over a year ago

@MarcoGeertsma - My pleasure!

brk · Accepted Answer · 2016-01-28 09:51:09Z

2

Change in properties of prototype will apply to all the instances including already exist , where as change in property that was created by constructor will only change it for the instance

answered Jan 28, 2016 at 9:51

brk

50.3k10 gold badges59 silver badges85 bronze badges

Comments

RIYAJ KHAN · Accepted Answer · 2016-01-28 10:09:01Z

2

Constructor

Basically constructor is used to create an object with new operator.

It used to initialize the instance properties of the constructor.So,constrctor with new is nothing but the implementation of class that Object oriented language like C++,JAVA have.

Every constructor has propertied prototype which hold the reference to constructor.

Prototype

JavaScript lack Class based inheritance.

In JavaScript to implement inheritance,we used Prototype which used to implement single level of inheritance.

So,to achieve code re-usability in JavaScript,prototype is used.It is nothing but prototypical inheritance.

In prototypical inheritance, method or properties added on prototype is immediately available to object created from same constructor

edited Jan 28, 2016 at 10:09

answered Jan 28, 2016 at 10:03

RIYAJ KHAN

15.3k5 gold badges34 silver badges56 bronze badges

Comments

Sumer · Accepted Answer · 2018-11-10 12:16:07Z

Constructor pattern: Constructor pattern is one of the most popular way of creating Objects in JS. The disadvantage is that for every object we create a copy of the functions gets created which is very inefficient way.

Prototype in JS: Its a shared area for every object where if you add something then its readily available to all the objects created from same constructor.

Prototype Pattern: Prototype Pattern is an enhanced way of writing Constructor pattern where we move the functions from the Constructor to the Constructor prototype. (We do it because of the disadvantages explained in constructor pattern above)

Now coming back to use initial questions ==> "When would you use the Constructor pattern and when would you use the Prototype pattern?" If we have to create simple objects with no functions then Constructor pattern is good to go but if there are functions then Prototype pattern will be efficient way.

Collectives™ on Stack Overflow

Difference between Constructor pattern and Prototype pattern

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related