JavaScript and JQuery Essentials Trainin... (44 Blogs) Become a Certified Professional
AWS Global Infrastructure

Front End Web Development

Topics Covered
  • AngularJS (18 Blogs)
  • jQuery UI Development (1 Blogs)
  • The Complete WebDeveloper (34 Blogs)
  • ReactJS (7 Blogs)
SEE MORE

MI-new-launch

myMock Interview Service for Real Tech Jobs

myMock-widget-banner-bg

Everything you Need to Know About Inheritance in JavaScript

Published on Sep 11,2019 8 Views

MI-new-launch

myMock Interview Service for Real Tech Jobs

myMock-mobile-banner-bg

myMock Interview Service for Real Tech Jobs

  • Mock interview in latest tech domains i.e JAVA, AI, DEVOPS,etc
  • Get interviewed by leading tech experts
  • Real time assessment report and video recording

Inheritance is an important concept in object-oriented programming. In the classical inheritance, methods from base class get copied into derived class. So let’s understand Inheritance in JavaScript in the following manner:

 

Inheritance in JavaScript

In JavaScript, inheritance is supported by using a prototype object. Some people call it “Prototypal Inheriatance” and some people call it “Behaviour Delegation”.

Inheritance in JavaScript

Prototypal Inheritance (Behavior Delegation Pattern)

  • v1 and v2 are linked to Vehicle.prototype because it’s been created using the new keyword.

  • Similarly, c1 and c2 are linked to Car.prototype and Car.prototype is linked to Vehicle.prototype.

  • In JavaScript when we create the object it does not copy the properties or behavior, it creates a link. A similar kind of linkage gets created in case of extending of class as well.

  • All arrows go in the opposite direction compare to classical non-js inheritance because it’s a behavior delegation link. These links are known as the prototype chain.

  • This pattern is called Behavior Delegation Pattern which is commonly known as a prototypal inheritance in JavaScript.

 

Code: Inheritance in JavaScript

!DOCTYPE html>

<html>

<body>

<h1>Demo: Inheritance</h1>

<script>    

function Person(firstName, lastName) {

this.FirstName = firstName || "unknown";

this.LastName = lastName || "unknown";            

}

Person.prototype.getFullName = function () {

return this.FirstName + " " + this.LastName;

}

function Student(firstName, lastName, schoolName, grade)

{

Person.call(this, firstName, lastName);

this.SchoolName = schoolName || "unknown";

this.Grade = grade || 0;

}

//Student.prototype = Person.prototype;

Student.prototype = new Person();

Student.prototype.constructor = Student;

var std = new Student("James","Bond", "XYZ", 10);

            

alert(std.getFullName()); // James Bond

alert(std instanceof Student); // true

alert(std instanceof Person); // true

</script>

</body>

</html>

 

This code will produce the following output.

OUTPUT:

Output-1Output-2

 

With this, we come to an end of this article. For more information you can refer to the following Blogs:

Check out the Angular training by Edureka, a trusted online learning company with a network of more than 250,000 satisfied learners spread across the globe. Angular is a JavaScript framework which is used to create scalable, enterprise, and performance client-side web applications. With Angular framework adoption being high, performance management of the application is community-driven indirectly driving better job opportunities. The Angular Certification Training aims at covering all these new concepts around Enterprise Application Development.

Got a question for us? Please mention it in the comments section of this article and we will get back to you.

Comments
0 Comments

Browse Categories

Subscribe to our Newsletter, and get personalized recommendations.