Introduction

JavaScript is an object-based language, meaning that everything in JavaScript is an object. To understand how Prototype works in JavaScript, we need to understand what an object is.

An object is a collection of properties, and a property is an association between a name and a value. A property has a name, which is a string, and a value, which can be anything.

In JavaScript, there are two types of objects: native objects and user-defined objects. Native objects are built-in objects that are bundled with the language; they are available automatically. User-defined objects are custom objects that are created by the user.

Every object in JavaScript has a Prototype object. The Prototype object is like a blueprint for the object; it defines the properties and methods that will be available to the object.

When we create a new object, the object inherits the properties and methods from its Prototype object. Keep reading to learn more about the Prototype object in JavaScript and how it works!

What is a prototype?

A prototype is an object in JavaScript that is used to give objects a base set of properties and methods. Every object in JavaScript has a Prototype object, which is like a blueprint for the object. The Prototype object is used to define the properties and methods that will be available to the object. Once an object is created, the object can add or modify its own properties or methods.

How do prototypes work in JavaScript?

To understand how Prototype works in JavaScript, we need to understand how the JavaScript engine works. When we create a new object, the JavaScript engine looks for a Prototype object that has the same name as the object. If one is found, then the object inherits the properties and methods from its Prototype object. When we call a method or access a property of an object, the JavaScript engine first looks for the method or property on the object itself. If it is not found, then it looks for the method or property on the object’s Prototype object. If it is still not found, then it continues to look through the Prototype object’s Prototype object, and so on until the method or property is found. It's called a prototype chain.

Creating a prototype

When we create a new object, the object automatically inherits the properties and methods from its Prototype object. We can create a Prototype object using a constructor function or using the Object.create() method. The constructor function is a function that is used to create new objects, and it is the most common way to create a Prototype object. The function can also be used to set the state of the object when it is created. The Object.create() the method is a built-in method in JavaScript that can be used to create a Prototype object. It takes two parameters; the first is an object to use as the prototype, and a second is an object with optional property descriptors.

//Creating a Prototype using constructor function. 
function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.greet = function() {
  console.log("Hello, my name is " + this.name + " and I am " + this.age + " years old.");
};

var person1 = new Person("Raj", 21);
var person2 = new Person("Sanjay", 23);

person1.greet(); // output: "Hello, my name is Raj and I am 21 years old."
person2.greet(); // output: "Hello, my name is Sanjay and I am 23 years old."

In this example, the Person function is a constructor function that takes in two parameters, name and age, and assigns them to properties of the this object. The greet function is added to the Person prototype, which allows all instances of Person to have access to it. Finally, two instances of Person are created using the new keyword, and the greet function is called on both of them to output their name and age.

//Creating a Prototype using constructor function.
var Person = {
  init: function(name, age) {
    this.name = name;
    this.age = age;
  },
  greet: function() {
    console.log("Hello, my name is " + this.name + " and I am " + this.age + " years old.");
  }
};

var person1 = Object.create(Person);
person1.init("Raj", 21);

var person2 = Object.create(Person);
person2.init("Sanjay", 23);

person1.greet(); // output: "Hello, my name is Raj and I am 21 years old."
person2.greet(); // output: "Hello, my name is Sanjay and I am 23 years old."

In this example, Person is an object that has two properties, init and greet. The init property is a function that takes in two parameters, name and age, and assigns them to properties of the object that it is called on (this). The greet function outputs a greeting with the name and age of the object that it is called on.

Two instances of Person are created using the Object.create() method, which takes Person as its argument and creates a new object with its prototype set to Person. The init function is called on each instance to set their properties, and the greet function is called on each instance to output their name and age.

Modifying a prototype

Once a Prototype object is created, we can modify it in several ways. We can add new properties and methods to the Prototype object, or we can modify existing properties and methods. The Object.defineProperty() method is a built-in method in JavaScript that can be used to modify a Prototype object. It takes three parameters; the first is the object whose property is to be modified, the second is the property name, and the third is the value of the property. Extending prototypes In JavaScript, we can extend an existing Prototype object by creating a new object and setting its prototype to the existing Prototype object. This is known as prototypal inheritance, and it allows us to easily add new properties and methods to an existing Prototype object. We can accomplish this using the Object.create() method. The Object.create() method takes two parameters; the first is an object to use as the prototype, and the second is an object with optional property descriptors.

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.greet = function() {
  console.log("Hello, my name is " + this.name + " and I am " + this.age + " years old.");
};

var person1 = new Person("Raj", 21);
person1.greet(); // output: "Hello, my name is Raj and I am 21 years old."

Object.defineProperty(Person.prototype, "greet", {
  get: function() {
    return function() {
      console.log("Hi, my name is " + this.name + " and I am " + this.age + " years old.");
    };
  }
});

person1.greet(); // output: "Hi, my name is Raj and I am 21 years old."

Note : -

Also, we can modify the prototype using another built-in method

1. Object.setPrototypeof() : The Object.setPrototypeOf() method sets the prototype of a specified objectto another object or null.

   Syntex :- Object.setPrototypeOf(obj, prototype)

Cloning objects with prototypes

In JavaScript, we can clone an existing object and its Prototype object by using the Object.create() method. The Object.create() method takes two parameters; the first is an object to use as the prototype, and the second is an object with optional property descriptors. When the Object.create() method is used to clone an object, the cloned object inherits the properties and methods from its Prototype object. This allows us to easily create multiple copies of an object, without having to manually set the properties and methods for each instance.

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.greet = function() {
  console.log("Hello, my name is " + this.name + " and I am " + this.age + " years old.");
};

var person1 = new Person("Raj", 21);
var person2 = Object.create(Person.prototype);
person2.name = "Sanjay";
person2.age = 23;

person1.greet(); // output: "Hello, my name is Raj and I am 21 years old."
person2.greet(); // output: "Hello, my name is Sanjay and I am 23 years old."

In example, we have a Person constructor function with a greet function added to its prototype. We then create an instance of Person and call the greet function on it to output a message.

Next, we create a new object person2 using Object.create() and passing in the Person.prototype. This sets person2's prototype to the Person prototype, giving it access to the greet function. We then set person2's name and age properties.

Finally, we call the greet function on both person1 and person2, and they output their respective messages.

By cloning objects with prototypes in this way, we can create new objects that inherit the properties and methods of an existing object, while still being able to modify their own properties. This can be useful when creating new objects that are similar to existing ones, but with some differences in their properties.

Using prototypes to simulate inheritance

In JavaScript, we can use prototypes to simulate inheritance. We can do this by creating a new object and setting its prototype to an existing object. This allows us to easily add new properties and methods to an existing object, without having to manually define the properties and methods for each instance. We can also use the Object.create() method to easily extend existing objects.

To wrap things up

In this article, we’ve explored how the prototype works in JavaScript. We’ve looked at how to create and modify a Prototype object, how to extend prototypes, how to clone objects with prototypes, and how to use prototypes to simulate inheritance. Finally, we have looked at how the JavaScript engine uses prototypes to look for properties and methods when an object is created.