This article is a part of Series: Design Patterns in JavaScript,

The prototype pattern falls under a creational design pattern category, as described by the GoF Prototype design pattern, used to create an object from the template, where the template is also an object.

This pattern is based on the prototypical inheritance in which we create an object which acts as a prototype for the other object.

Uses: In JavaScript sometimes, we require an object initialization with the default properties or functions. In other words, we require an inheritance for newly created objects which is based on a template (previously created object).

We use prototypical inheritance in JavaScript (which is a native behavior of JavaScript) to achieve the same.

Using Code: Let’s simulate a simple folder class, using function in JavaScript.
  1. /* a simple constructor function*/
  2. function Folder() {}
  3. /* set properties and function using prototype, we can also use Folder.prototype.[property] notation */
  4. Folder.prototype =
  5. {
  6. constructor: Folder,
  7. name: "New Folder",
  8. createOn: new Date().toString(),
  9. getInfo: function() {
  10. console.log("Name: " + this.name + "\nCreate On: " + this.createOn);
  11. }
  12. };
  13. // create a prototype
  14. var myFolder = Object.create(Folder.prototype);
  15. console.log(myFolder.name); // New Folder
  16. console.log(myFolder.getInfo()); // Name: New Folder and date
We used Object.create function to create a prototype here. myFolder is a prototype which can be used further in the Application. We can create as many as prototypes as per the requirement.

In order to change the default property, we can simply the change name, using:
  1. myFolder.name = "My Folder";
  2. console.log(myFolder.name); // My Folder
In some cases, we need to add more properties and functions in the prototype object. We can also add the new properties, using Object.create function as follows:
  1. var myFolder = Object.create(Folder.prototype,
  2. {
  3. id: {
  4. value: "temp id"
  5. }
  6. });
  7. console.log(myFolder.id); // temp id
  8. but
  9. if you want change id as: myFolder.id = "new id"; // temp id
You will be surprised that ID is still having an old value in it. The reason is that Object.create uses Object.defineProperties to create the properties. Let’s look into the code, given above, in detail.
  1. var myFolder = Object.create(Folder.prototype,
  2. {
  3. id: {
  4. value: "temp id" //Object.defineProperties
  5. enumerable: false, // its false by default
  6. writable: false, // its false by default
  7. configurable: false // its false by default
  8. }
  9. });
Thus, when we added ID, we just set the value property. If we want to modify the value for the defined property, we need to make it writable. Let’s change it as follows:
  1. var myFolder = Object.create(Folder.prototype,
  2. {
  3. id: {
  4. value: "temp id",
  5. writable: true
  6. }
  7. });
Now if you change ID, you will get the expected result:
  1. myFolder.id="new id";
  2. console.log(myFolder.id); // new id
Conclusion: In this article, I explained how we can use the prototype design pattern in JavaScript. I hope you have enjoyed it.