In this blog post, we will demystify these two terms and explain the difference between them.
So what’s the difference between constructor and prototype? A short answer is that the constructor is a function that is used to create an object, while the prototype is an object that contains properties and methods that are inherited by objects created from a constructor.
Let’s take a look at an example:
In the example above, we have a constructor function that takes a
name parameter and assigns it to the
name property of the object. We also have a prototype method called
sayHello, which prints a message to the console.
When we create a new
Person object using the constructor function, we can call the
sayHello method on it, and it will print the message with the name that we passed into the constructor.
person object can use the
sayHello method because it’s inherited from the prototype of the
Person constructor function.
Overview of constructors
Constructors are functions that are used to create an object. When you call a constructor function with the
new keyword, it will create a new object and return it.
If you’re coming from an OOP background, it’s easiest to compare constructor functions to classes. Just like in other languages, constructors allow you to create new objects and define their properties and methods.
Person constructor function with the same properties and methods:
prototype keyword to add methods to our constructor function, whereas in Java we would just add them inside the class.
In fact, the new class syntax that came with ES6 is syntactic sugar that is meant to make working with constructor functions more similar to other OOP languages.
Notice also how we use
this refers to the object that is implicitly created when you use the
Overview of the Prototype
Now let’s cover the prototype in a bit more detail and why we use it to share properties and methods of the constructor between the created objects.
The purpose of the prototype is to share properties and methods between objects that are created from the constructor function.
For example, in our Person constructor function above, we added a
sayHello method to the prototype. This means that every object created from the Person constructor will have a
Prototype shares properties between objects in a memory-efficient way. If we add a method to the prototype, only one instance of that method exists in memory, and it’s shared between all objects created from the constructor.
If we were to add the
sayHello method directly to the Person constructor function, then every object would have its own copy of that method, taking up more memory.
If it’s not there, it will look at the prototype of the prototype, and so on until either a match is found or the end of the prototype chain is reached.
Modifying Prototype after the object is created
One of the benefits of using a constructor function and prototype is that we can add new properties and methods to the prototype after an object has been created.
For example, let’s say we want to add a
getName method to our Person constructor function:
As you can see, we were able to add the
getName method to the prototype after the
person object was created, and it still worked as expected.
If you’d like to get more web development, React and TypeScript tips consider
following me on Twitter,
where I share things as I learn them.