Search for a command to run...
And how to convert it to class based inheritance
Full Stack Developer | Freelancer | JavaScript | React | Nodejs.
Loves sharing knowledge through technical articles.
Dev.to: https://dev.to/myogeshchavan97
https://linktr.ee/myogeshchavan97
Nicely explained !
Nice writeup! ⭐
The prototypal inheritance model reminds me of the linked list data structure, where the prototype chain is like the links in a linked list. Actually, the scope chain seems to work similarly in JavaScript.
Maybe linked lists were one of Brendan Eich's favorite data structures 🤔
Thanks Dave VanderWeele. I really like your view of Linked list and inheritance 🙂
In this tutorial, you will build a Task Management App using Next.js 16 and Prisma 7 from scratch. By creating this app, you will learn: How to set up Prisma 7 with the new Rust-free architecture How to configure a database with Prisma's driver ada...
If you're a React/Next.js developer who diligently updated your packages last week after the critical React2Shell vulnerability (CVE-2025-55182), I have some frustrating news: you need to update again. Security researchers, while probing the patches ...
Is your React app dragging its feet, but you can’t pinpoint the cause? You might think you’re following the best practices, but some common development patterns are actually degrading your app’s performance behind the scenes. In this article, we’ll u...
How to Use Separate SSH Keys for Company and Personal GitHub Accounts Managing multiple GitHub accounts is a common challenge for developers who juggle both personal and professional projects. It becomes even more complex when you want to use differe...
Have you ever built a React app only to realize that users from different countries can't use it effectively because it only supports English? In this tutorial, you'll learn how to build truly global React application using internationalization (i18n...
On this page
Before starting with prototypal inheritance let’s first understand what a prototype is.
All the objects in JavaScript like
Array,Boolean,Dateetc all inherit properties and methods from their prototype.
Object is the at top of the Prototype chain means all the other objects inherit their properties and methods from Object.prototype.
Suppose we have Person object constructor:
function Person(name, age) {
this.name = name;
this.age = age;
}
Then we create objects of Person as follows:
const person1 = new Person("David", 30);
const person2 = new Person("John", 35);
console.log(person1); // {name: "David", age: 30}
console.log(person2); // {name: "John", age: 35}
If we want to add another property to the Person object we can add that to an individual object like this:
person1.gender = 'Male';
but this will only add this property to person1 object.
console.log(person1.gender); // Male
console.log(person2.gender); // undefined
To add the property to the Person object itself we have to add it to its prototype before creating objects so it will be available to all of its objects.
Person.prototype.gender = 'Male';
const person1 = new Person("David", 30);
const person2 = new Person("John", 35);
console.log(person1.gender); // Male
console.log(person2.gender); // Male
We can also add methods to the Person prototype like this:
Person.prototype.display = function() {
console.log(this.name, this.age);
};
const person1 = new Person("David", 30);
const person2 = new Person("John", 35);
person1.display(); // David 30
person2.display(); // John 35
So to add any property or method to an object, we need to add it to its prototype.
If we compare the person1 and person2 display methods we will see that it returns true
console.log(person1.display === person2.display) // true
It returns true because in memory there is only a single copy of the display function because we added the method to its prototype so it's shared by all objects.
Let's see what happens when we add it directly inside the Person constructor
function Person(name, age) {
this.name = name;
this.age = age;
this.display = function() {
console.log(this.name, this.age);
};
}
const person1 = new Person("David", 30);
const person2 = new Person("John", 35);
person1.display(); // David 30
person2.display() // John 35
Now, let's compare the display methods:
console.log(person1.display === person2.display) // false
Now it displays false because as we have added the method directly to the constructor function, each object created from Person will have its own copy of function so there are two copies of display function in memory here and as we create more objects, the number of copies of display function inside memory will also increase.
So it's a bad practice and it's not recommended to create methods directly inside the constructor function instead we should add them to the prototype.
Now, we have some basic knowledge of prototypes, let's understand prototypal inheritance now.
Let's start with the same Person example above.
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.display = function() {
console.log(this.name, this.age);
};
Now, let's create an Employee constructor function that will inherit the properties and methods of the Person.
function Employee(name, age, salary) {
Person.call(this, name, age);
this.salary = salary;
}
const emp = new Employee('Mike', 20, 4000);
Here, we are using Person.call function to call the Person’s constructor and pass the name and age to it.
Now, let’s check what emp contains:
console.log(emp); // {name: "Mike", age: 20, salary: 4000}
As you can see, it contains all the properties of Person plus its own properties.
Now, let's call the display method using the emp object.
emp.display(); // Error: emp.display is not a function
Why do we get the error?
This is because we only mentioned inheriting properties of Person using Person.call(this, name, age)
To inherit methods also, we need to link the prototype and then create an object.
Employee.prototype = Object.create(Person.prototype);
const emp = new Employee('Mike', 20, 4000);
emp.display(); // Mike 20
Now, let’s check the type of Employee which we can check using constructor property
console.log(emp.constructor) // Person
console.log(Employee.prototype.constructor) // Person
It prints Person which is wrong because we know that, it should be Employee. The constructor property should always return the correct type.
Suppose, we have an array:
const numbers = [1, 2, 3, 4];
console.log(typeof numbers); // "object"
We get an object because every array in JavaScript is an object so to get its correct type we can use constructor property that returns the correct type.
console.log(numbers.constructor) // Array
console.log(numbers.constructor === Array) // true
So to fix the issue with Employee constructor we need to change its constructor type
Employee.prototype.constructor = Employee;
console.log(emp.constructor) // Employee
console.log(Employee.prototype.constructor) // Employee
Now, we get the correct result. The complete prototypal inheritance will look like this
As you can see, even for the simple prototypal inheritance we have to add a lot of extra code.
Therefore ES6 has added class syntax which allows us to implement the same in an easy way.
As you can see, the class-based syntax is short and easy to understand when compared with prototypal inheritance.
Note: The class at the end uses the prototypal inheritance itself. It’s just that, we don’t need to worry about it
Starting with ES6, there are many useful additions to JavaScript like:
You can learn everything about all the ES6+ features in detail in my Mastering Modern JavaScript book.
Check out free preview contents of the book here.
Also, you can check out my free Introduction to React Router course to learn React Router from scratch.
Want to stay up to date with regular content regarding JavaScript, React, Node.js? Follow me on LinkedIn.
