Polymorphism in JavaScript. Polymorphism is a kernel concept of an object-oriented standard that presents a way to do a single step in different forms. It presents the capability to call the same method on different JavaScript objects. As JavaScript has a mechanism to maintain the OOPS standard, Polymorphism is one of the basic rules which is sustained by it.
As object-oriented programming concepts rotate mainly around objects the objects can perform differently in different situations. Polymorphism is nothing but one set inside many forms. One kind of object can perform differently depending on the runtime situation. Polymorphism uses the concept of Javascript Inheritance to realize this. In polymorphism, various objects will have the same method but different utilization, and depending upon the user’s decision a similar object will be chosen and the method compared to that object will be executed.
Syntax:
Let’s see the polymorphism concept using a simple example.
var v1 = new Car(); v1.run(); // run() method from Car class will be executed var v2 = new Truck(); v2.run(); // run() method from Truck class will be executed
Working on Polymorphism in JavaScript
Polymorphism provides us to determine the same method in different objects and presents the ability to call them depending upon the right object. The user can choose an object of any of the child classes at the time of execution, the JavaScript will call then the function() method respectively.
Implement Polymorphism in JavaScript
Example:)
Let’s see the JavaScript classes similar to the example defined above.
<!DOCTYPE html>
<html>
<head>
<title>
Polymorphism in JavaScript
</title>
<style>
.output {
border :#006400 2px solid;
background-color : #f0f8ff;
text-align : left;
border-radius: 4px;
padding-left : 20px;
height : 200px auto;
width : 600px auto;
}
.outputtext {
font-size : 20px;
font-style : normal;
color : blue;
}
</style>
</head>
<body>
<div class = "output">
<h2> Polymorphism in JavaScript </h2>
<div class = "outputtext">
<p>Open Console by Ctrl+ Shift + J Or simply F12 and go to console</p>
<script type = "text/javascript">
class Fruit {
run() {
console.log( " Fruit is Favourite " );
}
}
class Apple extends Fruit {
run() {
console.log("Apple is Favourite " );
}
}
class Mango extends Fruit {
run() {
console.log(" Mango is Favourite " );
}
}
var x1 = new Fruit();
var x2 = new Apple();
var x3 = new Mango();
console.log( x1 );
x1.run();
console.log( x2 );
x2.run();
console.log( x3 );
x3.run();
</script>
</body>
</html>Here, we have one parent class Bus and two child classes Van and Jeep. All the classes have method run() with the same name, but depending upon the reference passed the identical run() method will be called.
Example:)
<!DOCTYPE html>
<html>
<head>
<title>
Polymorphism in JavaScript
</title>
<style>
.output {
border :#006400 2px solid;
background-color : #f0f8ff;
text-align : left;
border-radius: 4px;
padding-left : 20px;
height : 200px auto;
width : 600px auto;
}
.outputtext {
font-size : 20px;
font-style : normal;
color : blue;
}
</style>
</head>
<body>
<div class = "output">
<h2> Polymorphism in JavaScript </h2>
<form>
<p> Please select your Favourite Fruit Name: </p>
<input type="radio" id="apple" name="Fruit" value="apple">
<label for="apple"> Apple </label> <br>
<input type="radio" id="Mango" name="Fruit" value="mango">
<label for="mango"> Mango </label> <br>
<br>
<input type="button" value="Submit" onclick = "processData(this.form)">
</form>
<div class = "outputtext">
<p id = "result"> </p>
</div>
</div>
<script type = "text/javascript">
class Fruit {
run() {
return " Fruit is Favourite " ;
}
}
class Apple extends Fruit {
run() {
return " Apple is Favourite " ;
}
}
class Mango extends Fruit {
run() {
return " Mango is Favourite " ;
}
}
function processData(form) {
var type = form.Fruit.value;
var v;
if(type == "apple"){
v = new Apple();
}else if( type == "mango"){
v = new Mango();
}else {
v = new Fruit();
}
msg = v.run();
document.getElementById("result").innerHTML = msg;
}
</script>
</body>
</html>Here, depending upon the users’ preference an object that will be performed and the similar run() method will be declared.
Conclusion
Polymorphism provides us to represent the same method in various objects and enables us to call them depending upon the object reference. This sort of behavior is helpful in a dynamic or runtime situation. We have seen different ways of attaining polymorphism in JavaScript.
No matter if some one searches for his vital thing, therefore he/she needs to be available that in detail, thus that
thing is maintained over here.
Hi, all is going well here and ofcourse every one is sharing data, that’s genuinely excellent, keep
up writing.
I constantly spent my half an hour to read this web site’s articles everyday along with a mug of coffee.