Prototype Explained in JavaScript

Introduction

In this tutorial, you will learn the concept of Prototype.

In JavaScript, a prototype is a mechanism that allows objects to inherit properties and methods from other objects. Instead of duplicating the same methods for every object, JavaScript uses prototypes so that multiple objects can share the same functionality.

Every JavaScript object has an internal property called [[Prototype]], which links it to another object.

Understanding prototypes is important because many JavaScript features, such as inheritance, method sharing, and object extension, rely on the prototype system.

What is a Prototype in JavaScript?

Every object in JavaScript has a prototype. A prototype is another object from which properties and methods are inherited. This concept is called prototype-based inheritance.

Example of Prototype

function Person(name) {
  this.name = name;
}
// Adding method to prototype
Person.prototype.sayHello = function () {
  console.log("Hello " + this.name);
};
const user1 = new Person("John");
user1.sayHello();

Explanation:

1. Person is a constructor function.
2. sayHello() is added to the prototype
3. All objects created using Person can access this method

Why are Prototypes Important?

Without prototypes, every object would create its own copy of methods.

Benefits of prototype:

There are many benefits of a prototype.

1. Prototype is used to save memory.

2. Prototype is used to improve performance.

3.  Prototype is used to enable inheritance.

Prototype Chain in JavaScript

JavaScript uses a concept called the Prototype Chain. It allows objects to inherit properties and methods from other objects. When a property or method is not found in the current object, JavaScript looks for it in its prototype, and this process continues up the chain.

Example:

const numbers = [1,2,3];
console.log(numbers.toString());

Explanation:

1. toString() is not inside the array object.
2. It comes from the Array prototype.

proto vs prototype

Many Beginners are confused about proto vs prototype. So I will show you a clear difference.

Example:

function Car(model){
  this.model = model;
}
const car1 = new Car("Tata");
console.log(car1.__proto__ === Car.prototype);

Output:

Prototype vs Instance Methods

Now, you will see the difference between Prototype vs Instance Methods.

Example:

function Animal(name){
  this.name = name;
}
Animal.prototype.sound = function(){
  console.log(this.name + " makes sound");
};
const dog = new Animal("Dog");
dog.sound();

Output:

Real Life Example of Prototype

I will show you a car manufacturing company example.

Suppose, a company manufactures cars of the same model, then every car has some common features such as:

1. Engine type
2. Number of wheels
3. Basic driving function

Instead of creating the above features separately for every car, the company defines them once in the car design blueprint. All cars created from that blueprint automatically have those features.

Example:

function Car(brand) {
 this.brand = brand;
}

Car.prototype.startEngine = function() {
 console.log(this.brand + " engine started");
};

const car1 = new Car("Innova");
const car2 = new Car("Fortuner");

car1.startEngine();
car2.startEngine();

Explanation:

1. Car.prototype.startEngine is defined only once.
2. Both car1 and car2 can use this method.
3. The method is shared through the prototype, which saves memory and improves performance.

Common Mistakes

I will show you some common mistakes.

1. Confusing Prototype with proto

Many beginners think prototype and proto are the same.

1. prototype → A property of constructor functions.
2. proto → A reference to an object’s internal prototype.

Example:

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

2. Defining Methods Inside the Constructor

A common mistake is defining methods inside the constructor function.

❌ Incorrect

function Person(name) {
 this.name = name;
 this.sayHello = function() {
   console.log("Hello " + this.name);
 };
}

This creates a new function for every object, which wastes memory.

✔ Correct

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

Person.prototype.sayHello = function() {
 console.log("Hello " + this.name);
};

Now all objects share the same method.

3. Overwriting the Prototype Incorrectly

Developers sometimes overwrite the prototype and forget to reset the constructor.

Person.prototype = {
 greet() {
   console.log("Hi");
 }
};

This removes the default constructor reference.

✔ Correct way:

Person.prototype = {
 constructor: Person,
 greet() {
   console.log("Hi");
 }
};

4. Not Understanding the Prototype Chain

When a property is not found in an object, JavaScript searches in the prototype chain.

Example:

console.log(car1.toString());

Even if toString() is not defined in car1, JavaScript finds it in the prototype chain from Object.prototype.

Interview Questions

Conclusion

Instead of duplicating functionality for every object, JavaScript uses prototypes to create a shared structure through the prototype chain.

When developers understand how prototypes work, they can write more optimized, maintainable, and reusable code. It also helps in inheritance, object-creation patterns, and JavaScript classes.

Initially, developers may seem confused at first when learning prototypes, but once you understand the concept of objects sharing behavior through a prototype, it becomes much easier to work with JavaScript’s object-oriented features.

Understand JavaScript Internals