INHERITANCE
Keyword
: extends
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<h2 style="background-color:
rgb(9, 238, 9);color:rgb(255, 0, 0);font-weight: bolder;font-family: Georgia,
'Times New Roman', Times, serif;">Inheritance</h2>
<h5 style="color:
rgb(231, 15, 166);">Output</h5>
</head>
<body>
<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>
</body>
</html>
Output
One
class extends another class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<h2 style="background-color:
rgb(9, 238, 9);color:rgb(255, 0, 0);font-weight: bolder;font-family: Georgia,
'Times New Roman', Times, serif;">Inheritance</h2>
<h5 style="color:
rgb(231, 15, 166);">Output</h5>
</head>
<body>
<script>
class Father
{
constructor()
{
this.car="BMW";
this.price=1000000;
}
}
class Son extends Father {
constructor(name,price) {
super();
this.name=name;
this.price1=price;
}
}
var v = new Son("Audi","700000");
document.writeln(v.car+"
"+v.price+" "+v.name+" "+v.price1);
</script>
</body>
</html>
Output
Polymorphism
Poly = Many
Morphism
= Task
Polymorphism
– Multitask
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<h2 style="background-color:
rgb(9, 238, 9);color:rgb(255, 0, 0);font-weight: bolder;font-family: Georgia,
'Times New Roman', Times, serif;">Polymorphism</h2>
<h5 style="color:
rgb(231, 15, 166);">Output</h5>
</head>
<body>
<script>
class A
{
display()
{
document.writeln("Class A called.<br>");
}
}
class B extends A
{
display()
{
document.writeln("Class B called.");
}
}
var a=[new A(), new B()]
a.forEach(function(msg)
{
msg.display();
});
</script>
</body>
</html>
Output
Abstraction
Hiding
internal details and showing functionality
- We cannot create an instance of Abstract Class.
- It reduces the duplication of code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<h2 style="background-color:
rgb(9, 238, 9);color:rgb(255, 0, 0);font-weight: bolder;font-family: Georgia,
'Times New Roman', Times, serif;">Abstraction</h2>
<h5 style="color:
rgb(231, 15, 166);">Output</h5>
</head>
<body>
<script>
function Vehicle()
{
this.vehicleName="vehicleName";
throw new Error("You cannot create
an instance of Abstract Class");
}
Vehicle.prototype.display=function()
{
return "Vehicle
is: "+this.vehicleName;
}
//Creating a constructor function
function Bike(vehicleName)
{
this.vehicleName=vehicleName;
}
//Creating object without using the
function constructor
Bike.prototype=Object.create(Vehicle.prototype);
var bike=new Bike("Vespa");
document.writeln(bike.display());
</script>
</body>
</html>
Output
0 comments:
Post a Comment