Object prototypes in javascript

What is a prototype in javascript?

A prototype is a mechanism in which every javascript objects inherit methods and properties from one to other. Every object in javascript has a prototype property.

What is __proto__ in javascript?

When we create a new object of the constructor function using the 'new' keyword. Javascript Engine creates an object and sets a property named __proto__ which points to its function's prototype object.

What is prototype chaining in javascript?

When a property or method is called on an object, Javascript first checks to see if the property or method is defined on the object itself. If it is not defined on the object, javascript then looks for it on the object's prototype. If the property or method is still not found, Javascript continues to look up the prototype chain until it either finds the property or method or reaches the end of the chain.

In javascript, the prototype chain is created automatically when an object is created.

Why use a prototype in javascript?

The prototype can add both variables and methods to an existing object dynamically. A prototype is an object which associates every object and function.

In javascript, everything is an object, including functions.

There is the following purpose to using prototypes in javascript.

1. Adding properties and methods to all objects

   We can add a new method or property to all existing objects by modifying the javascript Object's prototype.

2. Creating reusable objects

   By defining the prototype of an object, we can make various new instances of this object without having to repeat the same code.

3. Inheritance

   Prototypes are used to implement inheritance in javascript. When we define an object and define its prototype, the new object will inherit all the methods and properties of the prototype.

4. Performance optimization

   By defining prototypes, we can optimize the performance of javascript code. We can avoid creating multiple copies of code for every object.

How to add methods and properties to the prototype object?

A constructor function is used to create objects using the 'new' keyword. Instead of calling the function directly, we have to invoke it with the 'new' keyword.

When we invoke the constructor function with the 'new' keyword, the following steps will happen.

1. A new object is created.

2. The 'this' keyword refers to the newly created object in the function.

3. The new object is linked to a prototype object.

4. We can modify the newly created object by adding properties or methods by executing the function body.

5. The newly created object is automatically returned from the function.

For example, we have a constructor function 'car', that takes two arguments 'model' and 'price'. By using 'new ' keyword, we create a new instance of the 'car' object.

function car(model,price) {

this.model=model;

this.price=price;

}

const maruti=new car('2011', 100000);

Here, new car('2011',100000) creates a new instance of car constructor function. The 'this' keyword inside the function refers to new object being created, and the model and price properties are added to the object.

Now let's define method and properties for prototype object.

//adding a method to car prototype

car.prototype.showcar=function () {

console.log ("This is car model:",this.model," and this is car price ",this.price);

}

//adding a property to prototype car

car.prototype.price=200000;

maruti.showcar( ); //This is car model:2011 and this is car price 200000

console.log(maruti.price); //200000

Here we defined a method showcar to the prototype of above defined construction function car . The instance of the car object is the newly created object maruti . When the instance object calls the prototype method showcar , the function returns newly created object with model and price property.

We have also assigned price value of constructor object. And newly created object has taken this value.