Prototype in JavaScript

JavaScript is known for its dynamic behavior and is quite a popular language today as it can dynamically handle events. Furthermore, for the ease of programmers, they can even attach the new properties with the help of an object any time they want. 

Inheritance is handled differently in JavaScript than in most other Object-Oriented Programming languages. Objects don’t get their properties from a class or type; instead, they use prototypes. A prototype chain exists in JavaScript, where a class can inherit from another class (and that class can inherit from another class).

There are various ways of creating objects in JavaScript. One of the ways is by making the constructor function. 

Constructor Function

To understand this concept, assume one example given below: 

function Car(model, color){
    this.model = model;
    this.color = color;
    this.getDetails = function(){
        return this.model + ' car is '+  this.color
    } 
}
const car1 = new Car('BMW', 'Black');
const car2 = new Car('Rolls-Royce', 'White');

console.log(car1.getDetails()) // BMW car is Black
console.log(car2.getDetails()) // Rolls-Royce car is White

console.log(car1);
console.log(car2);

If you check in the console, you will get the output as below screenshot

Here in the above example, two objects are present, car1 and car2, which are created with the help of the constructor. 

Meanwhile, javascript is a different language as every object contains its methods and properties. Besides, in our example, we have two objects with two instances of the constructor function named getDetails(). However, it does not makes any sense as here we are just creating the same thing two times. This thing does not increase the efficiency of a program. But, to increase the efficiency of a program, the programmers can take the help of the prototype property of a constructor function.

In the case of the prototype, it works straightforwardly. An object created in Javascript adds a new property to the prototype function known as dunder proto. Moreover, dunder proto or __proto__ points to the constructor function’s prototype object.

function Car(model, color){
    this.model = model;
    this.color = color;
}

Car.prototype.getDetails = function(){
    return this.model + ' car is '+  this.color
} 

const car1 = new Car('BMW', 'Black');
const car2 = new Car('Rolls-Royce', 'White');

console.log(car1.getDetails()) // BMW car is Black
console.log(car2.getDetails()) // Rolls-Royce car is White

console.log(car1);
console.log(car2);

The getDetails() property is inherited from Car in the car1 and car2, as shown in the figure.

The prototype object of the function Car is referenced by the dunder proto or __proto__ property of the car1 object, which is constructed using the Car function Object().

As mentioned in the below figure, both car1’s proto or __proto__ property and Car.prototype property are equal. To check whether this statement is true or not, we use the === operator.

console.log(car1.__proto__ === Car.prototype);

Output: true

So, how many objects are constructed using the prototype property, functions are loaded into memory only once, and we can override tasks if necessary. This helps to ease the coding for coders.

[Also Read, What do the terms call(), apply(), and bind () indicate in JavaScript?]

JavaScript(ES6) Classes

ES6, which is known as the origin of Javascript classes, is essentially known as syntactical sugar on top of JavaScript’s prototype-based inheritance system. The class syntax in JavaScript does not introduce a new object-oriented inheritance model. Using function expression in early ES5.

To understand the concept of defining classes, consider the small example given below:

Using Constructor Function

function Car(model, color){
    this.model = model;
    this.color = color;
}

Car.prototype.getDetails = function(){
    return this.model + ' car is '+  this.color
} 

Classes are “special functions,” hence the class syntax has two parts: class expressions and class declarations, exactly like function expressions and function declarations.

Using ES6 Classes

class Car {
    constructor(color, model){
        this.color = color;
        this.model = model
    }
    getDetails(){
        return this.model + ' car is ' + this.color
    }
}

const car1 = new Car('black', 'BMW');
const car2 = new Car('white', 'Rolls-Royce');

console.log(car1.getDetails()) // BMW car is black
console.log(car2.getDetails()) // Rolls-Royce car is white

[Also Read, JavaScript Coding Interview Questions and Answers]

Benefits of Using class

• The syntax is both practical and self-contained.
• In JavaScript, there is only one technique to simulate classes. Prior to ES6, popular libraries had a number of conflicting implementations.
• People with a language background based on class are more familiar with it.

In Javascript, Objects play an important role as it acts as a wrapper for properties, which are called own properties. It means that these objects contain them in a direct manner. Whenever an object tries to access a property, it does not own, and then the prototype chain is traversed. Moreover, the Interpreter, which is another property, is considered one of the closest prototypes which will stand in the future. In this, until and unless the property is found or the prototype is null, there is only one output, and that is the end of the chain.

Meanwhile, Javascript is the only language where almost all objects act as an instance of Objects.

Understanding prototypes is not an easy task for any JavaScript developer. Furthermore, working with ES6 classes syntax is quite popularized, but at the same time, it is a complex task for many programmers. But, this helps the programmers to get rid of complex problems in a short period of time.