Prototypes in JavaScript

Welcome to the fascinating world of prototypes in JavaScript! Prototypes are the cornerstone of object-oriented programming in this language. They act as hidden blueprints that define the properties and methods that objects inherit. This chapter delves into the core concepts, practical applications, and advanced aspects of prototypes, empowering you to craft well-structured and reusable objects in your JavaScript code.

Unveiling the Prototype Chain

Every Object Has a Prototype

In JavaScript, every object (except the base Object itself) has a hidden property called [[Prototype]] (often referred to as __proto__ in developer tools). This property points to the object’s prototype, which is another object that serves as its blueprint.

				
					const person = {};
console.log(person.hasOwnProperty('toString')); // Output: false (inherited)

Explanation:

We create an empty object person.
Even though we haven’t defined a toString method on person, we can still call it (person.toString()). This is because person inherits the toString method from its prototype (likely the built-in Object.prototype).
hasOwnProperty checks if a property is directly defined on the object itself, not inherited. Here, it returns false for toString

The Prototype Chain in Action

When you try to access a property or method on an object, JavaScript follows a chain of prototypes. It first searches for the property on the object itself. If not found, it looks up the prototype linked by the [[Prototype]] property. This process continues until the property is found or the end of the chain (usually Object.prototype) is reached.

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

Animal.prototype.makeSound = function() {
  console.log("Generic animal sound");
};

const dog = new Animal("Dog");
dog.makeSound(); // Output: Generic animal sound

Explanation:

We define an Animal constructor with a species property and a makeSound method on its prototype.
When we create a dog object using new Animal, it inherits the makeSound method from the Animal.prototype.
Even though makeSound isn’t directly defined on dog, it’s accessible because JavaScript follows the prototype chain to find it.

Modifying the Prototype

Adding Properties and Methods to Prototype

You can add properties and methods directly to the constructor’s prototype object. These additions become available to all instances (objects) created using that constructor.

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

Animal.prototype.walk = function() {
  console.log(`${this.species} is walking.`);
};

const dog = new Animal("Dog");
const cat = new Animal("Cat");

dog.walk(); // Output: Dog is walking.
cat.walk(); // Output: Cat is walking.

Explanation:

We define an Animal constructor and add a walk method to its prototype.
Now, both dog and cat objects (created using Animal) can inherit and use the walk method, even though it’s not defined directly on them.

Overriding Inherited Properties and Methods

If an object already has a property or method with the same name as one defined in the prototype, the object’s property/method takes precedence. This is called overriding.

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

Animal.prototype.makeSound = function() {
  console.log("Generic animal sound");
};

function Dog(species) {
  this.species = species;
}

Dog.prototype.makeSound = function() {
  console.log("Woof!");
};

const dog = new Dog("Dog");
dog.makeSound(); // Output: Woof!

Explanation:

We have an Animal constructor with a makeSound method in its prototype.
We define a Dog constructor that inherits from Animal.
However, Dog also defines its own makeSound method.
When we create a dog object, it uses the makeSound method defined in the Dog.prototype, overriding the inherited one from Animal.prototype.

Advanced Prototype Techniques

Object.create()

The Object.create() method allows you to create a new object using an existing object as the prototype. This provides more control over inheritance compared to using constructors directly.

				
					const animalProto = {
  makeSound() {
    console.log("Generic animal sound");
  }
};

const dog = Object.create(animalProto);
dog.species = "Dog";
dog.makeSound(); // Output: Generic animal sound

Explanation:

Here, we create an object animalProto that serves as the prototype.
We use Object.create(animalProto) to create a new object dog that inherits from animalProto.
We can then add properties like species to dog.
When dog.makeSound() is called, it uses the inherited method from animalProto.

Checking the Prototype Chain with Object.getPrototypeOf()

The Object.getPrototypeOf(object) method returns the object’s immediate prototype in the chain. This can be helpful for debugging and understanding inheritance relationships.

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

const dog = new Animal("Dog");
const animalPrototype = Object.getPrototypeOf(dog);
console.log(animalPrototype === Animal.prototype); // Output: true

Explanation:

We define an Animal constructor.
We create a dog object using Animal.
Object.getPrototypeOf(dog) returns the prototype object (Animal.prototype) that dog inherits from.
We compare it with Animal.prototype to verify they are the same object.

Prototypes are a fundamental concept in JavaScript's object-oriented paradigm. By understanding how they establish inheritance and how to manipulate them, you can create well-structured and reusable objects. Remember, prototype chains can become complex in large applications, so plan your inheritance structure carefully! Happy coding !❤️

Prototypes in JavaScript

Unveiling the Prototype Chain

Every Object Has a Prototype

Explanation:

The Prototype Chain in Action

Explanation:

Modifying the Prototype

Adding Properties and Methods to Prototype

Explanation:

Overriding Inherited Properties and Methods

Explanation:

Advanced Prototype Techniques

Object.create()

Explanation:

Checking the Prototype Chain with Object.getPrototypeOf()

Explanation:

Table of Contents

Explore

Popular Tutorials

Contact here