function Person(name, age) {
this.name = name;
this.age = age;
}
const me = new Person('Joe', 20);
console.log(me); // {name: 'Joe', age: 20}
In a nutshell the above snippet creates a Person class that can have multiple instances. By convention functional classes in javascript start with a capital letter.
Let's dig deeper into what's going on here?? How a normal function can be used for classess?? 🤔🤔
The Person
function is just like any other function which when called directly just returns undefined
as we are not explicitly returning anything from it. But the real magic lies in the new
keyword on line var me = new Person('Joe', 20)
.
Lets understand that magic - There are a couple of steps that happen when we use the new
keyword to initialize a function :
- An empty object
{}
is created. -
Person
is called by passing the reference of the object to it:Person.call({}, 'Joe', 20)
- Inside
Person
this
now refers to the object passed in the above step. - The object's proto is set to the function's prototype using
{}.__proto__ = Person.prototype.
- Finally return the object and that's what we get into
me
Concept Aside: Every function in javascript has a prototype object available on it. That's how you use Array.prototype.map
. And every object has a __proto__
object on it. For further watch this great video Discovering JavaScript.
Since the prototype
and __proto__
refer to the same object, whenever you add a new function on the prototype
it becomes available on all instances.
Person.prototype.greet = function() {
console.log('Hi', this.name);
}
me.greet(); // Hi Joe
const you = new Person('Alice', 22);
you.greet(); // Hi Alice
So far we undestood how classes are created in javascript. Let's understand how to inherit classes in javascript.
Let's create a new class called Employee that inherits the Person class
function Employee(name, age, title) {
Person.call(this, name, age);
this.title = title;
}
// create Employee prototype from Person prototype
Employee.prototype = Object.create(Person.prototype);
const joe = new Employee('Joe', 22, 'Developer');
console.log(joe.name); // Joe
joe.greet(); // Hi Joe
Woah, we have finally inherited our Person class to create an Employee class and we didn't have to rewrite the greet
function.
Let's see what just happened ??
- We created our
Employee
class just like we createdPerson
class.- Inside our employee class we are calling the Person class by passing it
this
reference. This is just like usingsuper
keyword in ES6 classes.
- Inside our employee class we are calling the Person class by passing it
- This is the most important part. We are recreating the Employee prototype from Person's prototype to get access to all the methods available on the
Person
class.
Now you may ask yourself Why use Object.create
and not just assign the Person prototype to Employee.
This is because we don't want Person and Employee to share the same prototype as objects in javascript are referenced. That's the whole point of inheriting Person.
So that's how we use prototypal inheritance in javascript. The new ES6 classes are basically a syntactic sugar on top of it. Basically this is what actually happens under the hood.
PS: You can find the complete code here GitHub Repo
Top comments (7)
Hi there, great article. You can host your code on Repl.it to let people run the code online. This is awesome for a quick preview of the code without having to copy and paste manually. Plus they can play with it easily and run the code again. I mentioned one but there are tons of online code hosting.
Hi thanks for appreciation. I have this code available in my GitHub repo. I will provide a link to it. And yeah I think I can add a repl next time.
Hey Hridayesh, great article.
Simple and awesome explanation of Prototype Inheritance.
keep it up.
Hey ayaan, thanks for appreciation.
thsnk U, cool and the main thing is clearly explained
Thanks Iryna.