Mastering JavaScript Inheritance with Prototypes

Unlocking the Power of Prototypes in JavaScript

Inheritance: A Fundamental Concept in Programming

Inheritance, a cornerstone of object-oriented programming, allows developers to reuse code and create more efficient, less error-prone programs. In class-based languages, classes serve as blueprints, and objects are their manifestations. To create an object, you must first create a class, and then you can create multiple objects from that class.

The Smartphone Example

Imagine a class representing a smartphone, with features like capturing images and GPS. Now, let’s say you want to create an iPhone class that captures images and has additional features like face ID scan. You have two options:

1. Rewrite the captureImages feature: Duplicate the code and add iPhone-specific features, which takes more time and effort and can introduce bugs.
2. Reuse features from the SmartPhone class: This is where inheritance comes in, allowing you to reuse code and create a more efficient program.

Prototypes: The JavaScript Way of Inheritance

In JavaScript, all objects have a special internal property called [[Prototype]], which references another object. This chain of [[Prototype]] references is the foundation of inheritance in JavaScript.

Accessing and Setting Prototypes

You can access an object’s [[Prototype]] using the __proto__ property or the Object.getPrototypeOf() method. To set an object’s [[Prototype]], use the Object.setPrototypeOf() method.

The Difference Between [[Prototype]] and .prototype

Many developers confuse [[Prototype]] with the .prototype property. While [[Prototype]] refers to an object’s prototype, .prototype is a property of a function that acts as a blueprint for the object’s [[Prototype]].

How Prototypes Work

When you access a property on an object, the JavaScript engine checks the object itself, then its [[Prototype]], and so on, until it finds the property or reaches the end of the prototype chain. When you set a property, JavaScript always sets it on the object itself, even if the same property exists on the [[Prototype]] chain.

Various Ways of Using Prototypical Inheritance

In JavaScript, there are multiple ways to create objects and use prototypical inheritance:

1. Object Literals: Create an object using an object literal, which inherits properties from Object.prototype.
2. Object Constructor: Use the built-in Object constructor to create an object, which also inherits from Object.prototype.
3. Object.create Method: Create an object with another object as its [[Prototype]].
4. Constructor Method: Create a custom constructor function to create objects that inherit from other constructors.
5. ES6 Classes: Use ES6 classes, which provide a syntactical sugar on top of prototypical inheritance.

Inheritance in JavaScript: A Summary

To recap, we’ve learned that:

• Inheritance in JavaScript is different from class-based languages, as there is no real concept of class.
• Objects inherit via a reference called [[Prototype]].
• We can access an object’s prototype using __proto__ or Object.getPrototypeOf().
• The function’s prototype property acts as a blueprint for the object’s [[Prototype]].
• We’ve explored multiple ways of creating objects and using prototypical inheritance in JavaScript.

I hope this article has helped you understand the power of prototypes in JavaScript. To learn more, check out the article on MDN.