JavaScript Prototypes: Master Concepts in Under 15 Minutes!

HIT Anti Mosquito Racquet | 6 months Warranty | Rechargeable Mosq…

Contains: 1 unit of HIT Mosquito Racquet
INSTANT KILL: 3,500V DC voltage on the net mesh that kills mosquitoes instantly
STRONG AND DURABLE: Made from Aircraft Grade ABS Plastic for high durability and long life

₹479

Buy on Amazon

JavaScript prototypes might seem complex, but once you get the hang of them, they can unlock a whole new level of understanding about how JavaScript works under the hood. In this guide, we’ll dive deep into prototypes, prototype chains, inheritance, and much more — all explained with friendly examples so you can master these concepts in just a few minutes.

1. What Are JavaScript Prototypes?

In JavaScript, every object has a built-in property called prototype. This prototype is essentially an object from which other objects inherit properties and methods. Prototypes make JavaScript’s inheritance system unique and flexible, allowing developers to create new objects based on the properties of existing ones.

Example:

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

Person.prototype.greet = function() {
  return `Hello, my name is ${this.name}`;
};

const john = new Person("John");
console.log(john.greet()); // Output: Hello, my name is John

Here, we created a constructor function Person and added a method greet to its prototype. This allows all instances of Person to access greet() through inheritance.

2. How Does the Prototype Chain Work?

When you try to access a property or method on an object, JavaScript first looks at the object itself. If it doesn’t find it there, it moves up to the object’s prototype, then to the prototype’s prototype, continuing this “prototype chain” until it either finds the property or reaches the end.

Example:

const myArray = [];
console.log(myArray.__proto__ === Array.prototype); // Output: true
console.log(Array.prototype.__proto__ === Object.prototype); // Output: true
console.log(Object.prototype.__proto__ === null); // Output: true

Here, myArray is an instance of Array, so JavaScript first checks Array.prototype for methods like push or map. If it can’t find them there, it moves up to Object.prototype.

3. Inheritance in JavaScript Using Prototypes

JavaScript uses prototypes to implement inheritance. Unlike traditional object-oriented languages, JavaScript doesn’t have classical inheritance (where classes inherit from other classes). Instead, objects can inherit from other objects.

Example:

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

Animal.prototype.describe = function() {
  return `I am a ${this.type}`;
};

function Dog(name) {
  Animal.call(this, "dog");
  this.name = name;
}

// Set Dog's prototype to inherit from Animal's prototype
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.bark = function() {
  return `${this.name} says Woof!`;
};

const buddy = new Dog("Buddy");
console.log(buddy.describe()); // Output: I am a dog
console.log(buddy.bark()); // Output: Buddy says Woof!

In this example, Dog inherits from Animal, gaining access to describe() while also having its own unique bark() method.

4. Adding Methods to Prototypes After Object Creation

Prototypes are dynamic, which means you can add methods to them even after objects are created. This makes prototypes highly flexible and is often used in JavaScript frameworks and libraries.

Example:

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

const myCar = new Car("Toyota");

Car.prototype.honk = function() {
  return `${this.brand} goes beep beep!`;
};

console.log(myCar.honk()); // Output: Toyota goes beep beep!

In this example, we added honk to Car.prototype after creating myCar, and myCar still has access to it.

5. Prototype vs. proto – What’s the Difference?

The prototype property is available only on function objects (constructors), while __proto__ is a property of every object and points to the prototype from which the object inherits. Understanding this distinction is key when working with prototypes in JavaScript.

Example:

function Gadget(type) {
  this.type = type;
}

const phone = new Gadget("Phone");

console.log(Gadget.prototype); // Shows the prototype object
console.log(phone.__proto__); // Also shows the prototype object
console.log(Gadget.prototype === phone.__proto__); // Output: true

While Gadget.prototype is the blueprint for objects created by Gadget, phone.__proto__ is the link that connects phone to its prototype chain.

6. Why Use Prototypes? The Benefits

JavaScript prototypes enable:

Memory Efficiency: By placing methods on the prototype, each instance doesn’t need its own copy of the method.
Inheritance: Objects can inherit properties and methods, making code more modular and reusable.
Easy Extension: You can add new methods and properties to prototypes even after objects are created.

Example:

In a system where thousands of instances share methods, prototypes save memory since each instance doesn’t need to store its own copies.

Final Words: Mastering JavaScript Prototypes

Prototypes are a core part of JavaScript’s object-oriented capabilities, providing a powerful way to manage inheritance and memory efficiency. Once you understand prototypes, you can write more efficient, modular, and maintainable JavaScript code.

With these examples and explanations, you should have a solid grasp of prototypes in JavaScript. Spend some time experimenting with these concepts to truly master JavaScript prototypes and enhance your coding skills!