JavaScript OOPs Inheritance

JavaScript OOPs Inheritance with javascript tutorial, introduction, javascript oops, application of javascript, loop, variable, data types, operators, javascript if, switch, operators, objects, form validation, map, typedarray etc.

<< Back to JAVASCRIPT

next → ← prev

JavaScript Inheritance

The JavaScript inheritance is a mechanism that allows us to create new classes on the basis of already existing classes. It provides flexibility to the child class to reuse the methods and variables of a parent class.

The JavaScript extends keyword is used to create a child class on the basis of a parent class. It facilitates child class to acquire all the properties and behavior of its parent class.

Points to remember

It maintains an IS-A relationship.
The extends keyword is used in class expressions or class declarations.
Using extends keyword, we can acquire all the properties and behavior of the inbuilt object as well as custom classes.
We can also use a prototype-based approach to achieve inheritance.

JavaScript extends Example: inbuilt object

In this example, we extends Date object to display today's date.

<script>
class Moment extends Date {
  constructor() {
    super();
  }}
var m=new Moment();
document.writeln("Current date:")
document.writeln(m.getDate()+"-"+(m.getMonth()+1)+"-"+m.getFullYear());
</script>

Test it Now

Output:

Current date: 31-8-2018

Let's see one more example to display the year value from the given date.

<script>
class Moment extends Date {
  constructor(year) {
    super(year);
  }}
var m=new Moment("August 15, 1947 20:22:10");
document.writeln("Year value:")
document.writeln(m.getFullYear());
</script>

Test it Now

Output:

Year value: 1947

JavaScript extends Example: Custom class

In this example, we declare sub-class that extends the properties of its parent class.

<script>
class Bike
{
  constructor()
  {
    this.company="Honda";
  }
}
class Vehicle extends Bike {
  constructor(name,price) {
   super();
    this.name=name;
    this.price=price;
  } 
}
var v = new Vehicle("Shine","70000");
document.writeln(v.company+" "+v.name+" "+v.price);
</script>

Test it Now

Output:

Honda Shine 70000

JavaScript extends Example: a Prototype-based approach

Here, we perform prototype-based inheritance. In this approach, there is no need to use class and extends keywords.

<script>
//Constructor function
function Bike(company)
{
    this.company=company; 
}

Bike.prototype.getCompany=function()
{
  return this.company;
}
//Another constructor function
function Vehicle(name,price) {
 this.name=name;
  this.price=price;
  } 
var bike = new Bike("Honda");
Vehicle.prototype=bike; //Now Bike treats as a parent of Vehicle.
var vehicle=new Vehicle("Shine",70000);
document.writeln(vehicle.getCompany()+" "+vehicle.name+" "+vehicle.price);
</script>

Test it Now

Output:

Honda Shine 70000

Next TopicJS Polymorphism

← prev next →

.Net

.NET Array Dictionary List String 2D Async DataTable Dates DateTime Enum File For Foreach Format IEnumerable If IndexOf Lambda LINQ Parse Path Process Property Regex Replace Sort Split Static StringBuilder Substring Switch Tuple

Java

Core Array ArrayList HashMap String 2D Cast Character Console Deque Duplicates File For Format HashSet If IndexOf Lambda Math ParseInt Process Random Regex Replace Sort Split StringBuilder Substring Switch Vector While

TheDeveloperBlog.com

JavaScript OOPs Inheritance

JavaScript Inheritance

Points to remember

JavaScript extends Example: inbuilt object

JavaScript extends Example: Custom class

JavaScript extends Example: a Prototype-based approach

Related Links:

.Net

Java

Related Links