Prototypal inheritance - Javascript weekly

In this article, we will see what is a prototypal inheritance in javascript. Prototypal inheritance - Javascript weekly

Curring in Javascript - Javascript weekly

Closures in Javascript - Javascript Weekly

Understanding Generators in Javascript

In Object-Oriented Programming, there is a concept called Inheritance, in which a child object inherits all the properties of the parent.

In Functional Programming like Javascript, we use the same concept as Prototypal inheritance and prototype chain.

What is Prototype Inheritance?

Firstly, there is the main difference between Object-oriented Inheritance and Javascript Prototypal Inheritance.

Unlike Object in OOPS, Javascript Object doesn't have type or class to inherit. But, javascript has a concept called prototype. that's the main difference

we will see the implementation of prototypal inheritance with a real-world example.

Real-World Example

Scenario

Let's say that you are building an application where the users are authorized based on role.

For example, the Admin can only able to create a project. Project Manager can able to access the project. But, all the users have few things in common. For example, login, etc

In this scenario, we can use prototypal inheritance and prototype chain.

prototypal inheritance

Firstly, just like a normal function. we create a function called User which is a Constructor (Note: In Javascript Constructor is nothing but a normal function)

1function User(name, age) {
2 this.name = name
3 this.age = age
4}

After that, create a method called login in the constructor function. the way to create it by using Prototype.

1User.prototype.login = function() {
2 console.log("logging in")
3}

After that, create an instance of User with a name called admin and project manager

1let admin = new User("admin", 40)
2
3let projectManager = new User("pm", 35)

we are creating an instance of User with a new keyword.

If we call the function login in admin and project manager, we will see something like this

Capture 2

the reason being is, admin and project manager has a prototypal inherited from the user.

To prove it, check if admin and project manager has login property or not.

1console.log(admin.hasOwnProperty('login'));

it will return false, the reason is login is inherited from the parent.

Complete Code:

1function User(name, age) {
2 this.name = name
3 this.age = age
4}
5
6User.prototype.login = function() {
7 console.log("logging in")
8}
9
10let admin = new User("admin", 40)
11
12admin.createProject = function() {
13 console.log("project is created")
14}
15
16console.log(admin.hasOwnProperty("login"))
17admin.login()
18
19admin.createProject()
20
21let projectManager = new User("pm", 35)
22
23projectManager.login()

Conclusion

That is to say, Prototypal inheritance and prototype chains are one of the powerful features in javascript.

That's it for this article, we will see more core concepts of Javascript in upcoming articles.

Until then, Happy Coding :-)

Author

Hey, I’m Ganesh, Full stack engineer.I love to write technical content and help developers like me to grow in the industry. please consider supporting me.

To Read More

Building a Production-grade Nodejs,...

This article is the first part of building a production grade nodejs,graphql and...

Modern React Redux Tutorials with R...

This tutorial explain how you can build an application using modern react redux ...

Building a Piano with React Hooks

In this article, we will see how to build a piano with react hooks. Building a P...

TypeScript Basics - The Definitive ...

In this article, we will learn some basics of typescript which helps you to deve...

Here's why podman is more secured t...

In this article we will see about podman and why it is more secured way to run c...

Building a Production - Ready Node....

In this article, we will see how to build a Nodejs, TypeScript Application and d...

Nginx for Front-end Developers

This article is to explain Nginx for Front-end Developers in a much simpler way....

What is gRPC ? How to implement gRP...

Everyone talks about gRPC. Have you ever wonder how it works or how to implement...