Prototype- The Backbone of JS Objects

If you are into JavaScript, you must be aware of a notion that everything is Object is JavaScript. This means that everything that you use in JS, like the arrays are actually linked with Objects behind the scenes. Now how is that array which are of type Array connected to Objects is something which can be explained only by understanding prototypes.

What and where are Prototypes?

A Prototype is an object that act as blueprint for other objects. Whenever an object is created, it can inherit properties and methods from its prototype.

Prototypes act as link for properties and methods for an object when they are not found directly on the object.

To see how prototypes actually look like and where to visualize it, you can simply head to your browser and create an array and then select that array, and you see Prototype attached to it.

If you expand the Prototype, you shall a list of associated function for our array.

At the very end you shall see another Prototype labelled as [[Prototype]]: Object, If you expand that you find:

Now if you create a simple object in the browser similar to how you created the array and check out its Prototype you would find something like:

Isn’t it similar to what we found in the end for the Array? And this is why we always hear that everything is an Object in JS. This behavior is also known as prototype chain in JS and is the backbone of inheritance in JS.

How are Prototypes used?

Now that we have known the secret behind the Prototypes, the next thing that comes to our mind in how to use Prototype and Prototype Chaining?

We shall understand it in layman terms by imagining that houses are build using bricks only, and there is a brick book (the prototype) that stores information about how to make strong bricks and other properties of the brick itself.

Now while building a house, if we don’t know something about the material of the brick, we can directly refer to the brick book which has all the required information.

const brick = {
  strength: "high",
  material: "clay",
  showInfo() {
    console.log(`This brick is made of ${this.material} and has ${this.strength} strength.`);
  }
};

// Create a house using bricks as its prototype
const house = Object.create(brick);
house.color = "red";
house.material = "concrete"; // overrides the prototype's material

// Add house-specific property
house.describe = function () {
  console.log(`This house is painted ${this.color}.`);
};

house.describe();   // This house is painted red.
house.showInfo();   // This brick is made of concrete and has high strength.

What is happening here?

1. House is the object

2. Brick is the prototype

3. House inherits showInfo from Brick

4. material is overridden by House, but strength comes from the prototype.

Do’s of Modifying Prototypes

1. Use Object.create to set prototypes.

    const house = Object.create(brick);
   

2. You can add shared behavior to the prototype object( brick)

    brick.showInfo = function () {
      console.log(`This brick is made of ${this.material} and has ${this.strength} strength.`);
    };
   

3. You can override prototype properties at the instance level if needed.

    house.material = "concrete";
   

Don’ts of Modifying Prototypes

1. Don’t modify Object.prototype or global prototypes because it pollutes all objects globally.

    Object.prototype.hello = () => console.log("Hi"); //this is not correct
   

2. Don’t modify the prototype after creating many instances

    const house1 = Object.create(brick);
    brick.insulation = "standard";
   

   Here house1 has already been created and modifying brick after it will not be correct and can throw errors if tried to be accessed from house1 later on.

Conclusion

This was a basic overview about Prototypes that are used in JavaScript and the ways to visualize them is layman terms. In the next blog we would be discussing more of it and in depth about how it is used in Inheritance in JS and the syntactical sugar that is used.

Stay Tuned and keep experimenting with Prototypes.