05-Mar-2025

JavaScript uses prototypes to implement inheritance and shared properties. Understanding prototypes is crucial for grasping how JavaScript objects work. This post will explain prototypes and how they relate to object-oriented programming in JavaScript.

Every JavaScript object has an internal, hidden property called [[Prototype]]. This property is a reference to another object, called the prototype. When you try to access a property on an object, and the object itself doesn’t have that property, JavaScript will look up the prototype chain. This continues until the property is found or the end of the chain is reached (which is null).

Think of it like looking for a book in a library. You first check the shelf you’re at. If it’s not there, you might check the next shelf, and so on. If the book isn’t in the library at all, the search ends.

// Create a simple object
const animal = {
  eats: true
};

// Create a new object with 'animal' as its prototype
const rabbit = Object.create(animal);

// Check a property directly on rabbit
console.log(rabbit.eats); // Output: true (Inherited from animal)

// Check if rabbit has its own 'eats' property
console.log(rabbit.hasOwnProperty('eats')); // Output: false

// Add a property to rabbit
rabbit.jumps = true;

console.log(rabbit.jumps); // Output: true
console.log(animal.jumps);  // Output: undefined (animal is not affected)

In this example, rabbit inherits the eats property from animal. When we access rabbit.eats, JavaScript doesn’t find eats directly on rabbit, so it looks up the prototype chain to animal, where it finds the property.

Object.create(animal) sets the prototype of rabbit to animal. You can also access and modify the prototype using __proto__ (deprecated) or Object.getPrototypeOf() and Object.setPrototypeOf(). However, directly manipulating the prototype chain is generally discouraged due to performance implications.

Constructor Functions and Prototypes:

Prototypes are also heavily involved in constructor functions, a common way to create objects in JavaScript.

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

Animal.prototype.speak = function() {
  console.log(this.name + " makes a sound.");
}

const dog = new Animal("Buddy");
dog.speak(); // Output: Buddy makes a sound.

Here, Animal.prototype is the prototype for all objects created using new Animal(). By adding speak to Animal.prototype, all instances of Animal inherit the speak method. This is more efficient than adding the method directly to each instance.

Understanding prototypes is fundamental for working effectively with JavaScript objects. They enable inheritance, help save memory, and are key to understanding how JavaScript implements object-oriented principles.