Prototype In javascript

Introduction

In javascript, we have learned about objects and their creation in the post. Now we will see what is the meaning of prototype in javascript. Whenever we create a function in javascript, we will get a prototype property attached to it. 

What is this prototype property attached to a function?
Basically, it is an object which has a constructor object which again points to the function itself. Now we will see how it looks. 

In this below image we can see that we have a car that has a property called prototype. When we console log this property we will get a constructor object which again points to the Car function which is used as a constructor to create objects in javascript. 


How to create an object using Function Instantiation

In javascript, we will create a function constructor and we will make instances of that function constructor to create objects on the go.
Suppose we have a function constructor Car in the following example and we will create two objects by making instances from this constructor. 

function Car (brand, color, model) {
    let car = {};
    car.brand = brand;
    car.color = color;
    car.model = model;
    
    
    car.showDetails = function(){
        console.log(`The car brand is: ${this.brand}`);
    }
    
    car.applyBrake = function(){
        console.log("Break applied");
    }
    return car;
}

const BMWcar = Car("BWM", "black", 2017);
const Audicar = Car("AUDI", "white", 2014);
BMWcar.showDetails(); // The car brand is: BWM
BMWcar.applyBrake(); // Break applied
Audicar.showDetails(); // The car brand is: AUDI

Every time we are calling the Car function to make an instance, we are calling the methods showDetails() and applyBrake(). This just increases our memory size by calling and creating these methods on every object creation. Instead of this, we should use the Car.prototype object to attach methods and properties which will be available for all object instance. We can keep the methods in a separate object also. As javascript already provides us an object as Car.prototype. We can attach methods and properties to this object and build a prototype chain. This is called Prototype Instantiation.

Prototype Instantiation

 We can attach methods and properties to this object and build a prototype chain. This is called Prototype Instantiation. Now we will attach our methods to Car.prototype object as follows and then we will see that when we create an instance using Car function constructor we can delegate to methods which are available in Car.prototype object:


function Car (brand, color, model) {
    let car = Object.create(Car.prototype);
    car.brand = brand;
    car.color = color;
    car.model = model;
    return car;
}
    Car.prototype.showDetails = function(){
        console.log(`The car brand is: ${this.brand}`);
    }
    
    Car.prototype.applyBrake = function(){
        console.log("Break applied");
    }


const BMWcar = Car("BWM", "black", 2017);
const Audicar = Car("AUDI", "white", 2014);
BMWcar.showDetails(); // The car brand is: BWM
BMWcar.applyBrake(); // Break applied
Audicar.showDetails(); // The car brand is: AUDI

Using New Keyword

We will write the above code using the new keyword now. What new keyword do? 
It will perform some steps under the hood.
  • It creates a new object by itself. Does this let car = {};
  • It will set the prototype of the newly created object to be the constructor function prototype property. Performs this step: Object.create(Car.prototype).
  • It will return this newly created object by itself.
  • Assign the scope to this.
  • We can reuse the function constructor to create as many objects as we need using the new keyword as it defines scope using this
Let us rewrite the above code using the new keyword:

function Car (brand, color, model) {
    this.brand = brand;
    this.color = color;
    this.model = model;
}
    Car.prototype.showDetails = function(){
        console.log(`The car brand is: ${this.brand}`);
    }
    
    Car.prototype.applyBrake = function(){
        console.log("Break applied");
    }


const BMWcar = new Car("BWM", "black", 2017); // Invoked using new keyword
const Audicar = new Car("AUDI", "white", 2014);

BMWcar.showDetails(); // The car brand is: BWM
BMWcar.applyBrake(); // Break applied
Audicar.showDetails(); // The car brand is: AUDI

Comments