Override Function & Inheritance in JavaScript

In this article we will understand how to Override Function in JavaScript and How to Implement Inheritance in JavaScript by Sagar Jaybhay.

Overriding Function In JavaScript

Javascript supports overriding but not overloading. When you define multiple functions in javascript and included it in the file then the last one is referred by the javascript engine.

Original Javascript File which we refer

function Employee(name)
{
    this.Name=name;   
}

Employee.prototype.getgreeting=function(){
    return "Hello, "+this.Name;
}

Now as per requirement we want to override getgreeting function then we create a new file and below code to override this function and include this both file in our index.html file.

Employee.prototype.getgreeting=function(){
    return this.Name.toUpperCase();
}

var emp=new Employee("xyz");
alert(emp.getgreeting())

Inheritance In JavaScript

Object-oriented programming languages like C#, Java support inheritance, and javascript is also object-oriented programming language so it supports Inheritance.

The main purpose of Inheritance is Code Reuse. In java or C# we create a parent class and that inherit in the child class, But in javascript, you can achieve this kind of functionality by using a prototype. So inheritance in javascript is prototype-based. We can implement this object inherits from another object.

// this is constructor function
var Employee=function(name)
{
    this.Name=name;
}

Employee.prototype.getname=function(){
    return this.Name;
}

var PermanantEmployee=function(salary){
    this.annualSalary=salary;
}

var emp=new Employee("Sagar Jaybhay");
PermanantEmployee.prototype =emp; // in this case employee object is parent of permanant employee

var per=new PermanantEmployee(3000);
console.log(per.getname());

document.writeln(per.getname());

In the above code, we create Employee as a constructor function and another constructor function which is a permanent employee.

Then we create an object of Employee and assign this object to the PermanentEmployee prototype object so properties in employee constructor function can access a permanent employee object.

per instanceof Employee

by using this code you can check whether is an instance of Employee or not and result is true.

Whatever method you added to parent constructor function can accessible to a permanent employee object.

hasOwnProperty method is used to determine the property belong to parent or child

// this is constructor function
var Employee=function(name)
{
    this.Name=name;
}

Employee.prototype.getname=function(){
    return this.Name;
}

var PermanantEmployee=function(salary){
    this.annualSalary=salary;
}

var emp=new Employee("Sagar Jaybhay");
PermanantEmployee.prototype =emp; // in this case employee object is parent of permanant employee

var per=new PermanantEmployee(3000);
console.log(per.getname());

document.writeln(per.getname());
document.writeln(per instanceof Employee)

document.writeln("<br/>")
document.writeln("annualSalary property : "+per.hasOwnProperty("annualSalary"))

document.writeln("<br/>")
document.writeln("Name property : "+emp.hasOwnProperty("Name"))

---

GitHub Project Link :- https://github.com/Sagar-Jaybhay/JavaScript-All-Labs

---