What is Prototype in JavaScript: How Objects Share Properties

Pure software engineering is about designing products that solve real-world problems and eliminate redundancy from stakeholders’ and customers’ lives. But developing scalable, efficient systems doesn’t mean writing millions of lines of code; software developers always prioritize writing the most optimal code that can be reused, so programs become more organized and easier to maintain.  

Similarly, Prototypes in JavaScript are mechanisms implemented to keep programs organized and maintainable. The biggest advantage prototypes offer is that they support inheritance, allowing objects to inherit properties and methods from other objects. To better understand this, let’s move on to the next sections.

Quick Answer:

A JavaScript prototype is an object from which other objects inherit properties and methods, enabling code reuse and shared behavior.

Prototype in JavaScript: Definition

Prototypes in JavaScript are basically models that enable the objects in a program to access the properties of other objects. Properties and functions added to the prototype become accessible across all instances. This feature ensures inheritance and optimal memory usage.

Example:

// Constructor function

function Student(name) {

  this.name = name;

}

// Adding a method to the prototype

Student.prototype.sayHello = function() {

  return “Hello, my name is ” + this.name;

};

// Creating one instance

const student1 = new Student(“Amit”);

const student2 = new Student(“Yash”);

// Using the prototype method

console.log(student.sayHello());

Explanation:

• In this code, we have created a Student object with a name property. After that, instead of adding the sayHello() function to each student, we added it to the prototype of the constructor function, i.e., Person.prototype.

• As a result, all instances of the student can now use that particular method. And at last, we had just printed the output by invoking the function for each student.

Learn and gain valuable insights with our ultimate JavaScript resource for free: JS eBook

Working Mechanism of Prototypes

In JavaScript, prototypes are essentially how an object shares methods with other objects.

Every object has a hidden link to another object called its prototype, and when you try to access a property or call a method, JavaScript will look first in that object; if it doesn’t find it there, then on the linked prototype, then on the prototype of the prototype, and so on — this is known as the prototypal chain.

When you add properties or methods to a constructor function’s prototype, all objects created from that constructor automatically have access to them, and this means saving memory as well as being able to inherit (i.e., one object can use features of another object through the chain).

Understanding Object Inheritance in JavaScript

In JavaScript, object inheritance refers to one object using the properties and methods of another object without actually declaring them. This occurs via the prototype chain. When accessing a property or method of an object, JavaScript starts by looking at the object.

It starts searching from there; if not found there, it routes to the object’s prototype, then follows its prototype chain until the first encountered property is found. This enables objects to share common characteristics effectively and facilitates extending functionality without repetition.

Example:

// Parent constructor

function Animal(name) {

  this.name = name;

}

// Adding a method to Animal’s prototype

Animal.prototype.sound = function() {

  return this.name + ” makes a sound”;

};

// Child constructor

function Dog(name, breed) {

  Animal.call(this, name); // Inherit properties from Animal

  this.breed = breed;

}

// Inherit methods from Animal’s prototype

Dog.prototype = Object.create(Animal.prototype);

Dog.prototype.constructor = Dog;

// Adding a method specific to Dog

Dog.prototype.bark = function() {

  return this.name + ” barks loudly”;

};

// Creating an instance of Dog

const dog1 = new Dog(“Tommy”, “Labrador”);

console.log(dog1.sound()); // From Animal

console.log(dog1.bark()); // From Dog

Explanation:

In this code, Dog is a child of Animal. dog1 can inherit sound() from the prototype of Animal and bark() from its own prototype. This demonstrates how objects ‘inherit’ methods from other objects, allowing code reuse while keeping code organized hierarchically and using less memory.

What is a Prototype Chain?

In JavaScript, the prototype chain is the method by which one object can inherit logic and properties of another object. Basically, every object has an internal pointer to another object, which is called its prototype. So when you try to access a property or a method of an object, the JS engine will first check the object itself for the property or method.

If not, it looks to the object’s prototype, then that prototype’s prototype, and so forth, until it either locates the property/method or the chain ends (null).

This chain of objects is called the prototype chain. It enables inheritance and method sharing across objects without duplicating code.

Example:

// Base object

function Person(name) {

  this.name = name;

}

// Adding a method to Person’s prototype

Person.prototype.sayHello = function() {

  return “Hello, my name is ” + this.name;

};

// Creating an object

const person1 = new Person(“Amit”);

// Accessing method from prototype chain

console.log(person1.sayHello()); // Found in Person.prototype

// Checking the chain

console.log(person1.__proto__ === Person.prototype);       // true

console.log(Person.prototype.__proto__ === Object.prototype);    // true

console.log(Object.prototype.__proto__);         // null (end of chain)

Explanation:

• Person1 doesn’t have the sayHello method directly, so JavaScript looks up the method in Person.prototype and finds it there.

• Person.prototype itself is linked to Object. prototype, so if a property is not found there, it checks Object.prototype.

• The chain stops when it gets to null.

How to Set Prototypes

There are mainly two ways to set prototypes. Let’s understand them one by one with code examples:

1. By implementing Object.create method

This way creates a new object directly from an existing prototype object. The new object inherits all the properties and methods of the prototype, allowing you to reuse functionality without using a constructor. It’s simple and useful when you just want to link objects through prototypes.

Example:

const foodPrototype = {

  describe() {

    console.log(“Tasty!”);

  },

};

const pizza = Object.create(foodPrototype);

pizza.describe();   // Tasty!

Explanation:

• Here, we initiate with a prototype object that contains the shared methods or properties.

• When we make a new object with Object.create(prototype), that new object is internally linked with prototype. In other words, it has access to all of the prototype’s methods and properties without them being defined in it directly.

• Therefore, the objects created from a prototype instantly get the updates if the prototype changes.

2. By implementing a constructor function

This method uses a special function to create objects with specific properties. You can also attach shared methods to the constructor’s prototype, so all instances can use them. It’s a common way to create multiple similar objects while keeping shared behavior efficient.

Example:

const foodPrototype = {

  describe() {

    console.log(`This is a ${this.name}!`);

  },

};

function FoodItem(name) {

  this.name = name;

}

Object.assign(FoodItem.prototype, foodPrototype);

const pizza = new FoodItem(“Pizza”);

pizza.describe();      // This is a Pizza!

Explanation:

• Here we define a constructor function that helps to create objects with certain properties, like name. In the constructor, Object.assign(this, details) is used to quickly add several properties to the newly created object.

• After that, by setting a prototype object to Constructor.prototype, all the instances of the constructor get the shared methods as a common property.

• If we make a new object through a new Constructor(), it will have its own properties and also be capable of using any methods in the prototype. This is a very neat way to combine the setting of properties and prototype inheritance.

Note:

Object properties belong directly to the object, while prototype properties/methods are inherited from the object’s prototype and shared across instances.

Tired of courses that only teach theory? HCL GUVI’s IITM Pravartak Certified MERN Full Stack Development Course goes beyond basics—get hands-on with real projects, build a standout portfolio, and master top tools like Git, MongoDB, Express, React, and Node.js, all while gearing up for actual job interviews. Enroll now and level up!

Conclusion

In short, JavaScript prototypes let objects share properties and methods, making code more efficient, organized, and easier to maintain. They form the backbone of inheritance, allowing objects to reuse functionality without duplication. By understanding prototypes, you can write cleaner code, create scalable applications, and fully leverage JavaScript’s object-oriented features.

FAQs

What is the difference between a prototype and a constructor?

The constructor creates new objects, while the prototype holds shared properties and reusable methods.

Can I add properties to an object’s prototype later?

Yes, any new property or method is immediately available to all existing and future objects.

Why use prototypes instead of adding methods inside the constructor?

Prototypes efficiently save memory by allowing all objects to share the same methods.