The JS Bifrost — Inheritance in JS — Prototype and class Inheritance

Welcome to The JS Bifrost, your pathway to a rock-solid foundation for God-level JavaScript. This is the next article in the series, which talks about Inheritance in JavaScript.

Unlike all other object-oriented programming languages, JavaScript chose prototypes for its way of handling inheritance, but with the release of ES2015, classes were introduced to the language’s syntax.

Let me put light on thought:

Classes are just syntactic sugar, JavaScript remains prototype based. They are not a new object-oriented inheritance model.

Let’s understand the Prototype first !!!!

In general, a prototype is nothing but a first or preliminary version of a device or vehicle from which other forms are developed. In Javascript also, it follows the prototype mechanism to inherit properties and methods.

All objects in Javascript have a prototype property, which acts as a model that inherits methods and properties from another object. It’s an object that stands on its own and we could use it by itself if we wanted to. The object property that we called proto that’s its prototype. That’s the object that is going to grab and will be able to get its properties and methods as well.

Consider the following example:

Here, we have an object as obj and it has a property called prop1. We can access this property by simply writing obj.prop1. As we know every object has a property called prototype(__proto__)is also an object. Say we have another property associated with proto as prop2. To access this property we don’t have to write obj.__proto__.prop2, we can simply say obj.prop2, and the JavaScript engine does the work of searching the prototype chain for those properties. Similarly for obj.prop3. This mechanism is nothing but the prototype chain.

When we call the property or method of an object, the browser checks to see if the actual object has the method on it, if not it checks if the method is available to it through its prototype object.

If the method’s not defined on the prototype object, the browser checks up another level to see if the current prototype object has the method available on its prototype object.

The browser will do this all the way up until it reaches the object at the top with null as its prototype.

Let’s understand it from a coding perspective…

In the above example, we have created a constructor called Car, which defines a brand new car.

We create sportsCar and provide properties of brandName, topSpeed, and color. Then we added a property called gearType to the Car prototype object and assigned the value ‘automatic’ to it.

When we call any defined object property, it will give you the value because it is available in the object itself, and when we call gearType it will also give you the value but, the only difference is it is available in the objects constructor prototype.

But if we check if either sportsCar.hasOwnProperty(‘gearType’) and Car.hasOwnProperty(‘gearType’) of ‘gearType’ and both return false, but Car.prototype.hasOwnProperty(‘gearType’) return true.

That is a Javascript prototype-based inheritance.

Now let’s get on with ES6 class.

Class Inheritance

A class is like a classification of the object to be created and in classical inheritance, methods from the base class get copied into the derived class.

In class inheritance, it creates sub-class relationships by inheriting objects or methods from base class to derived class. The way we use the instance in Javascript, you can’t similarly make use of classes. To invoke methods, you must first instantiate an object of the class and then invoke.

Let’s understand it through example…
Consider we have a class User as defined below

Note: Since ES6, Class inheritance may or may not use the class keyword. Constructor functions are used, instead.

…and we would like to create another class as Member based on User class :

So, here in the above example, anny objects can have access to both User methods and Member methods.

Let’s understand how this works, internally extends keyword works using the prototype mechanism.

class Child extends Parent this will get converted into the prototype object i.e. Child.prototype.__proto__ will be Parent.prototype

In our case: Member.prototype.__proto__ = User.prototype
So if the method is not found in Member class, Javascript takes it from the User class.
This is the basic idea of how class inheritance works on top of prototypal inheritance.

Well done for making it to the end of this article…!!!

Conclusion

• Classes from other languages like Java that don’t technically exist in Javascript but Classes are just syntactic sugar. It follows a prototype mechanism to achieve inheritance.
• Whether or not you agree with the inclusion of classes to the JS language, Prototypal Inheritance stands on its own as an elegant inheritance mechanism. Javascript is prototype-based only, in class inheritance also, it works in prototype mechanism

Congrats! You’ve moved a step forward on the Bifrost to God Level JavaScript.
Watch this space to make more progress on your way to ‘God level JavaScript’ with ‘The JS Bifrost’.

The JS Bifrost — Shallow or Deep Copy?

The JS Bifrost — Nullish Coalescing (??) Operator

The JS Bifrost — Currying Functions in Javascript

Cleaner Code with JavaScript functions

The JS Bifrost — Understanding the coding pattern called (IIFE)

The JS Bifrost — Memoization it is!

The JS Bifrost - Incredible JavaScript Features

The JS Bifrost — Callback Hell

The JS Bifrost — Optional Chaining Operator(?.)