JavaScript Prototype

Introduction

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.

OR

A prototype is a mechanism that allows one object to inherit properties and methods from another object.

Syntax

The basic syntax

ConstructorFunction.prototype.propertyName = value;

OR

ConstructorFunction.prototype.methodName = function() {
    // code
};

Creating a Prototype Method

function Person(name) {
  this.name = name;
}
// Adding method to prototype
Person.prototype.sayHello = function () {
  console.log("Hello " + this.name);
};
const person1 = new Person("John");
person1.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

Note: The method is shared among all instances.

Creating Prototype Properties

Properties can also be added to prototypes.

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

Car.prototype.country = "Japan";

let car1 = new Car("Toyota");

console.log(car1.country);

Output:

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. A prototype is used to save memory.

2. Prototype is used to improve performance.

3.  Prototype is used to enable inheritance.

Prototype Chain in JavaScript

When JavaScript cannot find a property in an object, it searches the prototype chain.

Prototype Chain 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.

Checking Prototypes

1. Using Object.getPrototypeOf()

let arr = [1, 2, 3];

console.log(Object.getPrototypeOf(arr));

Output:

Note: This method returns the prototype of an object.

Using instanceof

The instanceof operator checks inheritance.

function Person() {}

let user = new Person();

console.log(user instanceof Person);

Output:

Built-in JavaScript Prototypes

Many JavaScript objects already have prototypes.

Array Prototype

let numbers = [1, 2, 3];

console.log(numbers.push);

Note: The push() method comes from Array.prototype.

String Prototype

let text = "Hello";

console.log(text.toUpperCase());

Note: The toUpperCase() method comes from String.prototype.

Object Prototype

let obj = {};

console.log(obj.hasOwnProperty("name"));

Note: The method comes from Object.prototype.

Prototype Inheritance

Objects can inherit from other objects.

let animal = {
    eats: true
};

let dog = Object.create(animal);

console.log(dog.eats);

Output:

Note: The dog object inherits the eats property from the animal.

Prototype vs Object Property

Prototype Property:

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

Person.prototype.country = "India";

let user = new Person("John");

//Accessing

console.log(user.name);

Output:

Direct Object Property:

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

Person.prototype.country = "India";

let user = new Person("John");

//Accessing

console.log(user.country);

Output:

Overriding Prototype Properties

Object properties take priority over prototype properties.

function User() {}

User.prototype.role = "User";

let admin = new User();

admin.role = "Admin";

console.log(admin.role);

Output:

Note: JavaScript finds the property in the object before checking the 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

JavaScript Prototype – Objective Questions (MCQs)

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.

Related JavaScript Tutorials