A guide to Prototype in JavaScript

Developers may construct interactive and dynamic online apps with the robust programming language — JavaScript. The prototype is one of the most crucial ideas in JavaScript since it allows objects to share functionality.

Prototypes in JavaScript

Every object in JavaScript has a prototype, which serves as the object’s bare bones. The methods and properties that an object will inherit are specified in the prototype. An object inherits all of its prototype’s properties and functions when you create a new one.

Let’s take a look at an example to see how this works in practice:

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

// Add a method to the Person prototype
Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
}

// Create a new Person object
const sumit = new Person('Sumit', 38);

// Call the sayHello method on the `sumit` object
sumit.sayHello(); // logs "Hello, my name is Sumit and I am 38 years old."

In this example, we define the Person constructor function, which has the two inputs of name and age. The Person prototype then gets a new method called sayHello that logs a welcome message to the console.

The new keyword is then used to create a new Person object called sumit. JavaScript searches the prototype chain of the sumit object for the sayHello method when the sayHello method is called on the sumit object. As the sayHello method is present in the Person prototype, JavaScript locates it and uses it to greet the sumit object.

Because you may share functionality amongst objects without having to write duplicate code, prototypes are crucial in JavaScript. For instance, you could simply create a new object and set its prototype to be the Person prototype if you wanted to create another object that had the same sayHello method as the Person object:

// Define a new constructor function
function Dog(breed) {
  this.breed = breed;
}

// Set the Dog prototype to be the Person prototype
Dog.prototype = Object.create(Person.prototype);

// Create a new Dog object
const golden = new Dog('Golden Retriever');

// Call the `sayHello` method on the `golden` object
golden.sayHello(); // logs "Hello, my name is undefined and I am undefined years old."

In this example, we develop a brand-new Dog constructor function with a single breed parameter. Using the Object.create method, we then changed the Dog prototype to the Person prototype. This implies that all of the Person prototype’s attributes and methods will be inherited by the Dog object.

The new keyword is then used to create a brand-new Dog object called golden. JavaScript searches the prototype chain of the golden object for the sayHello function when we call it on the golden object. JavaScript searches for the sayHello method and invokes it on the golden object because the Dog prototype is specified to be the Person prototype.

One thing to keep in mind is that when you change an object’s prototype, you also change the complete prototype chain for that object. This implies that all previously declared attributes and methods on the object’s prototype will be lost. Use the Object.assign function to add new properties and methods to an existing prototype to prevent losing previously defined attributes and methods while setting a new prototype. Here’s an illustration:

// Define a new constructor function
function Cat(name) {
  this.name = name;
}

// Add a method to the Cat prototype using Object.assign
Object.assign(Cat.prototype, {
  sayHello() {
    console.log(`Hello, my name is ${this.name}!`);
  },
  meow() {
    console.log('Meow!');
  }
});

// Create a new Cat object
const fluffy = new Cat('Fluffy');

// Call the sayHello and meow methods on the fluffy object
fluffy.sayHello(); // logs "Hello, my name is Fluffy!"
fluffy.meow(); // logs "Meow!"

In this example, we define a brand-new Cat constructor function with a single name parameter. The Cat prototype is then given a sayHello method and a meow method using Object.assign. The Cat prototype is the destination object for this method, which also accepts one or more source objects (in this case, two objects containing the sayHello and meow methods).

The new keyword is then used to create a new Cat object called fluffy. JavaScript searches the prototype chain of the fluffy object for the sayHello and meow methods when we call them on the fluffy object. JavaScript discovers these methods and invokes them on the fluffy object since we introduced them to the Cat prototype using Object.assign.

If you are a native Bangla language speaker, you can check my detail beginner friendly tutorial on JavaScript prototype. This will help you a lot in JavaScript interviews:

Prototype in JavaScript — explained in Bangla

In conclusion, prototypes are a strong and crucial idea in JavaScript that enable functionality sharing between objects. You may guarantee that all objects of a type will inherit the functionality by declaring attributes and methods on the prototype. Also, you can prevent losing previously established functionality while setting a new prototype by using Object.assign to add new properties and methods to an existing prototype.