Exploring JavaScript’s Prototypal Inheritance: How It Works

JavaScript is a powerful, dynamic language that allows developers to create flexible and reusable code. One of the core features of JavaScript that makes this possible is prototypal inheritance. If you’re new to JavaScript or have heard of this concept but are unclear about how it works, this blog post will guide you through the basics and help you understand how prototypal inheritance can improve your code.

What is Prototypal Inheritance?

In JavaScript, prototypal inheritance allows one object to inherit properties and methods from another object. This means that an object can share its functionality with other objects, making code reuse simpler and more efficient.

Unlike other object-oriented programming languages, which use class-based inheritance (such as Java or C++), JavaScript uses prototypes. In simple terms, every object in JavaScript has a prototype, which is another object that it inherits properties and methods from.

How Prototypal Inheritance Works in JavaScript:

Let’s break it down with an example. Consider the following code:

// Create an object 'person' with some properties
let person = {
  firstName: 'Atul',
  lastName: 'Saini',
  fullName: function() {
    return this.firstName + ' ' + this.lastName;
  }
};

// Create another object 'employee' that inherits from 'person'
let employee = Object.create(person);
employee.job = 'Developer';
console.log(employee.fullName());  // Output: Atul Saini
console.log(employee.job);         // Output: Developer

In this example, the employee object inherits the fullName method from the person object via Object.create(). The employee object can access the fullName function, even though it was not defined within the employee object itself.

This is the essence of prototypal inheritance — objects inherit behavior from other objects through their prototypes.

The Prototype Chain:

Every JavaScript object has a hidden internal property called [[Prototype]], which refers to the object it inherits from. In other words, each object is linked to another object through its prototype. This forms a prototype chain.

When you try to access a property or method on an object, JavaScript first checks if the property exists on the object itself. If it doesn’t, it looks up the chain to the object’s prototype and so on, until it either finds the property or reaches the end of the chain (which is null).

Get Atul Saini’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

For example:

let animal = {
  sound: 'Roar'
};

let lion = Object.create(animal);
console.log(lion.sound); // Output: Roar

Here, lion does not have a sound property of its own, so it looks up the prototype chain and finds it on the animal object.

The prototype Property:

In addition to objects being linked to their prototypes, functions in JavaScript also have a prototype property. This allows functions to serve as constructors for creating new objects. Let’s see an example:

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

Person.prototype.fullName = function() {
  return this.firstName + ' ' + this.lastName;
};

let person1 = new Person('Shonty', 'Rana');
console.log(person1.fullName());  // Output: Shonty Rana

In this example:

• Person is a constructor function that creates objects with firstName and lastName properties.
• The fullName method is added to Person.prototype, so every instance of Person will have access to this method.

Constructor Functions and Prototypal Inheritance:

When you create an object using a constructor function, it automatically links to the constructor function’s prototype object. This is the key to how prototypal inheritance works with constructor functions.

For instance:

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

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

let dog = new Animal('Dog');
dog.speak();  // Output: Dog makes a sound.

In this case, dog inherits the speak method from Animal.prototype.

Why is Prototypal Inheritance Important?

1. Code Reusability: Prototypal inheritance allows for easy sharing of functionality across objects. Rather than duplicating code, you can define common methods on prototypes and all instances of that prototype will inherit them.
2. Performance: Since methods are shared between objects through their prototype, memory usage is optimized. If you were to define the same method in every object, memory would be wasted as each object would hold its own copy.
3. Flexibility: Prototypal inheritance is more flexible than class-based inheritance. You can easily modify the prototype of any object at runtime and share new methods or properties with all its instances.

Common Mistakes to Avoid:

1. Overriding Prototype Methods: It’s easy to accidentally override methods on an object’s prototype, which can lead to unintended behavior. Be careful when modifying or extending prototypes.
2. Prototype Pollution: If you’re not cautious, you can modify the Object.prototype, which affects all objects. This can lead to bugs that are hard to track down.

Conclusion:

Prototypal inheritance is a powerful feature of JavaScript that allows objects to inherit properties and methods from other objects. By understanding how prototypes work, you can create more efficient, reusable, and flexible code. Whether you’re working with plain objects or using constructor functions, the prototype chain enables you to build applications that are both scalable and maintainable.