What's Prototype and Prototypal Inheritance in JavaScript?

JavaScript's approach to inheritance might seem strange at first for those familiar with class-based languages. But fear not! This blog post will guide you through the fascinating world of prototypes and prototypal inheritance in JavaScript, complete with code examples.

What is a Prototype?

Have you ever wondered how you get access to so many built-in functions and properties like length, concat, fill, find, push(for Arrays) & toString, valueOf(for Objects) because we don't defined them in our code. So there's something in the JavaScript names Prototype.

So whenever you create JavaScript object, JS engine automatically attaches your object with some hidden properties & functions and these are the hidden function which you can access with any array, object or functions, so these comes via Prototype.

Let me repeat it, Whenever you create an object, function, array or something, JS engine attaches an object to your object, function or array. And that object you can access via array.__proto__ And this is the object where JS engine is putting all these methods & properties for us to access.

Hence, every object has an internal property called [[Prototype]] (written as __proto__ in some browsers for debugging purposes). which is a reference to another object. This [[Prototype]] object is often referred to as the object's prototype. When you create an object using object literals or constructors, JavaScript automatically assigns a prototype to it.

Here's an example to illustrate:

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

Person.prototype.greet = function() {
  console.log("Hello, my name is " + this.name);
};

const person1 = new Person("Alice");

In this example, the Person function serves as a constructor that creates objects of type Person. The Person.prototype object holds the greet function, which can be used by any object created using the Person constructor.

Key takeaway: A prototype is an object that serves as a blueprint for other objects. It defines properties and methods that can be inherited by its children.

What is Prototypal Inheritance?

Prototypal inheritance is a mechanism in JavaScript where objects can access properties and methods defined on their prototype. When you try to access a property or method on an object, JavaScript first checks if it exists directly on the object. If not, it then looks for the property or method on the object's prototype, and then on the prototype's prototype, and so on, until it finds a match or reaches the end of the prototype chain (which is null).

Here's how it works in the previous example:

person1.greet(); // This will call the greet function from Person.prototype

Since person1 doesn't have a greet method defined directly on itself, JavaScript looks for it on the prototype (Person.prototype), finds it, and executes it.

Key takeaway: Prototypal inheritance allows objects to inherit properties and methods from their prototypes, enabling code reuse and creating object hierarchies.

What is the Prototype Chain?

The prototype chain is the sequence of objects linked together through the [[Prototype]] property. When you try to access a property or method on an object, JavaScript follows this chain to find the property or method.

In our example, the prototype chain looks like this:

person1 -> Person.prototype -> null

Key takeaway: The prototype chain is the mechanism that allows JavaScript to traverse through prototypes to find inherited properties and methods.

Why is it called proto?

While __proto__ is sometimes used for debugging purposes, it's not the official way to access the prototype. The actual property name is [[Prototype]], which is written in double square brackets to indicate it's an internal property. The term "proto" is simply a shorthand for "prototype."

Inheritance in JavaScript

Inheritance in JavaScript is achieved through prototypal inheritance. By creating objects that use another object as their prototype, you establish an inheritance relationship. The child object inherits properties and methods from its parent object (the prototype).

Key takeaway: In JavaScript, inheritance is not based on classes but on the relationship between objects and their prototypes.

I hope this blog post has shed light on prototypes and prototypal inheritance in JavaScript. By understanding these concepts, you can write more efficient and reusable code.

Remember:

• Prototypes are blueprints for objects.

• Prototypal inheritance allows objects to inherit properties and methods from their prototypes.

• The prototype chain determines how JavaScript searches for properties and methods.

• Inheritance in JavaScript is based on prototypes, not classes.

To read more about tech & open source, you can follow me on Hashnode and Twitter (@MadhuSaini22) and If this blog helped you in any way then you can sponsor my work and show love and support.

Thank you so much for reading! 👩‍💻