JavaScript OOPs: JavaScript Polymorphism

One of the important bases of JavaScript Object Oriented Programming (OOP) is polymorphism. It's the process of designing things such that they may share behaviors and override these shared behaviors with specified ones. Polymorphism takes full advantage of inheritance to do this.

JavaScript Polymorphism, to put it more professionally, relates to the notion of reusing a single piece of code many times. Polymorphism allows you to create various versions of a method, and one kind of object can have diverse behavior based on the runtime circumstances. With the use of relevant examples, this article will discuss JavaScript Polymorphism.

Features of Javascript Polymorphism

Programmers can use the same method name several times.
Polymorphism reduces the number of functions that may be combined together.

To better write good javascript Polymorphism, you need to understand how to properly structure Javascript functions. Also check out some Javascript examples

Syntax

var v1 = new Bike();
v1.run(); // run() method from Bike class will be executed
var v2 = new Car();
v2.run(); // run() method from Car class will be executed

Examples Implementing Javascript Polymorphism

Example 1: Using JavaScript Classes

Let's define the JavaScript classes in the same way as in the previous example.

<!DOCTYPE html>
<html>
<head>
<title>
Polymorphism in JavaScript
</title>
<style>
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 200px;
width : 95%;
}
.resultText {
font-size : 20px;
font-style : normal;
color : blue;
}
</style>
</head>
<body>
<div class = "results">
<h2> JavaScript Polymorphism </h2>
<div class = "resultText">
<p> Run the console to check the output </p>
<script type = "text/javascript">
class Vehicle {
run() {
console.log( " Vehicle is running " );
}
}
class Bike extends Vehicle {
run() {
console.log( " Bike is running " );
}
}
class Car extends Vehicle {
run() {
console.log( " Car is running " );
}
}
var v1 = new Vehicle();
var v2 = new Bike();
var v3 = new Car();
console.log( v1 );
v1.run();
console.log( v2 );
v2.run();
console.log( v3 );
v3.run();
</script>
</body>
</html>

We have the parent class - Vehicle and two (2) child classes - Bike and Car. All classes have the identical method run(), however based on the reference supplied, the corresponding run() function is invoked.

Example 2: One of the child classes does not have run() method

We'll examine what happens if we delete the run() function from the Car class.

<!DOCTYPE html>
<html>
<head>
<title>
JavaScript Polymorphism
</title>
<style>
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 200px;
width : 95%;
}
.resultText {
font-size : 20px;
font-style : normal;
color : blue;
}
</style>
</head>
<body>
<div class = "results">
<h2> JavaScript Polymorphism </h2>
<div class = "resultText">
<p> Run the console to check the output </p>
<script type = "text/javascript">
class Vehicle {
run() {
console.log( this );
console.log( " Vehicle is running " );
}
}
class Bike extends Vehicle {
run() {
console.log( this );
console.log( " Bike is running " );
}
}
class Car extends Vehicle {
}
var v1 = new Vehicle();
var v2 = new Bike();
var v3 = new Car();
var v = [ v1, v2, v3];
v.forEach(function(obj) {
obj.run();
});
</script>
</body>
</html>

We've made an array of all the objects and used the run() function on them. See how Javascript objects are properly created

Because the Car class lacks a run() function, the run() function from the Vehicle class will be called even if the object reference is of the Car type.

Example 3: Using the Prototype-Based Approach

<!DOCTYPE html>
<html>
<head>
<title>
JavaScript Polymorphism
</title>
<style>
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 200px;
width : 95%;
}
.resultText {
font-size : 20px;
font-style : normal;
color : blue;
}
</style>
</head>
<body>
<div class = "results">
<h2> JavaScript Polymorphism </h2>
<div class = "resultText">
<p> Run the console to check the output </p>
<script type = "text/javascript">
function Vehicle() {
}
Vehicle.prototype.run = function() {
console.log( " Vehicle is running " );
}
function Bike() {
}
Car.prototype = Object.create (Vehicle.prototype);
Car.prototype.run = function() {
console.log( " Bike is running " );
}
function Car() {
}
Truck.prototype = Object.create (Vehicle.prototype);
Truck.prototype.run = function() {
console.log( " Car is running " );
}
var v1 = new Vehicle();
var v2 = new Bike();
var v3 = new Car();
console.log( v1 );
v1.run();
console.log( v2 );
v2.run();
console.log( v3 );
v3.run();
</script>
</body>
</html>

Example 4: Real World Application

We shall carry out the approach based on the user's preferences.

<!DOCTYPE html>
<html>
<head>
<title>
JavaScript Polymorphism
</title>
<style>
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 250px;
width : 95%;
}
.resultText {
font-size : 20px;
font-style : normal;
color : blue;
}
</style>
</head>
<body>
<div class = "results">
<h2> JavaScript Polymorphism </h2>
<form>
<p> Kindly select the type of Vehicle type you have: </p>
<input type="radio" id="bike" name="vehicle" value="bike">
<label for="bike"> Bike </label> <br>
<input type="radio" id="Car" name="vehicle" value="car">
<label for="car"> Car </label> <br>
<br>
<input type="button" value="Submit" onclick = "processData(this.form)">
</form>
<div class = "resultText">
<p id = "result"> </p>
</div>
</div>
<script type = "text/javascript">
class Vehicle {
run() {
return " Vehicle is running " ;
}
}
class Bike extends Vehicle {
run() {
return " Bike is running " ;
}
}
class Car extends Vehicle {
run() {
return " Car is running " ;
}
}
function processData(form) {
var type = form.vehicle.value;
var v;
if(type == "bike"){
v = new Bike();
}else if( type == "car"){
v = new Car();
}else {
v = new Vehicle();
}
msg = v.run();
document.getElementById("result").innerHTML = msg;
}
</script>
</body>
</html>

Depending on the users' preferences, an object will be constructed and the associated run() function will be invoked.