Prototypal inheritance - Javascript weekly
Tags: showdev, webdev, tutorial, beginners
Published: 2019-07-27 20:44:43

---
title: Prototypal inheritance - Javascript weekly
published: true
description: Prototypal inheritance - Javascript weekly
tags: showdev,webdev,tutorial,beginners
series : javascript
canonical_url : https://cloudnweb.dev/2019/07/prototypal-inheritance-javascript-weekly/
---
<!-- wp:paragraph -->
<p> In this article, we will see what is a prototypal inheritance in javascript. Prototypal inheritance - Javascript weekly </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><a href="https://cloudnweb.dev/2019/07/currying-in-javascript-javascript-weekly/">Curring in Javascript - Javascript weekly</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><a href="https://cloudnweb.dev/2019/07/understanding-closures-in-javascript-javascript-weekly/">Closures in Javascript - Javascript Weekly</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><a href="https://cloudnweb.dev/2019/07/understanding-closures-in-javascript-javascript-weekly/">Understanding Generators in Javascript</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In Object-Oriented Programming, there is a concept called Inheritance, in which a child object inherits all the properties of the parent.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In Functional Programming like Javascript, we use the same concept as <a href="https://javascript.info/prototype-inheritance">Prototypal inheritance</a> and prototype chain.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>What is Prototype Inheritance?</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Firstly, there is the main difference between Object-oriented Inheritance and Javascript  Prototypal Inheritance. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>we will see the implementation of prototypal inheritance with a real-world example.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Real-World Example</h3>
<!-- /wp:heading -->

<!-- wp:heading {"level":4} -->
<h4>Scenario</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Let's say that you are building an application where the users are authorized based on role. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>For example, the <strong>Admin </strong>can only able to create a project. <strong>Project Manager</strong> can able to access the project. But, all the users have few things in common. For example, login, etc</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In this scenario, we can use prototypal inheritance and prototype chain.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":1121} -->
<figure class="wp-block-image"><img src="https://cloudnweb.dev/wp-content/uploads/2019/07/prototypal_inheritance.png" alt="" class="wp-image-1121"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Firstly, just like a normal function. we create a function called <strong>User</strong> which is a Constructor (Note: In Javascript Constructor is nothing but a normal function)</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>
function User(name,age) {
   this.name = name;
   this.age = age;
}</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>After that, create a method called <strong>login </strong>in the constructor function. the way to create it by using <strong>Prototype</strong>.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>User.prototype.login = function() {
  console.log('logging in');
}</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>After that, create an instance of <strong>User </strong>with a name called <strong>admin </strong>and <strong>project manager</strong></p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>let admin = new User('admin',40);

let projectManager = new User('pm',35);</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>we are creating an instance of <strong>User </strong>with a <strong>new </strong>keyword.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>If we call the function <strong>login </strong>in admin and project manager, we will see something like this</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":1127} -->
<figure class="wp-block-image"><img src="https://cloudnweb.dev/wp-content/uploads/2019/07/Capture-2.png" alt="" class="wp-image-1127"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>the reason being is, <strong>admin </strong>and <strong>project manager</strong> has a prototypal inherited from the <strong>user</strong>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>To prove it, check if <strong>admin </strong>and <strong>project manager</strong> has <strong>login </strong>property or not.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>console.log(admin.hasOwnProperty('login'));</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>it will return false, the reason is login is <strong>inherited </strong>from the parent.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Complete Code:</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>function User(name,age) {
   this.name = name;
   this.age = age;
}

User.prototype.login = function() {

  console.log('logging in');
}


let admin = new User('admin',40);

admin.createProject = function() {
  console.log('project is created');
}

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

admin.createProject();

let projectManager = new User('pm',35);

projectManager.login();</code></pre>
<!-- /wp:code -->

{% replit @ganeshmani/prototypeinheritance %}

<!-- wp:heading {"level":3} -->
<h3>Conclusion</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>That is to say, Prototypal inheritance and prototype chains are one of the powerful features in javascript.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>That's it for this article, we will see more  core concepts of Javascript in upcoming articles.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Until then, Happy Coding :-)</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->