Practical 5
Practical 5
OOP concepts
Introduction
Classes
In JavaScript, classes are the special type of functions. We can define the class just like
function declarations and function expressions.
The JavaScript class contains various class members within a body including methods or
constructor. The class is executed in strict mode. So, the code containing the silent error
or mistake throws an error.
a) Class Declarations:
A class can be defined by using a class declaration. A class keyword is used to declare a
class with any particular name. According to JavaScript naming conventions, the name
of the class always starts with an uppercase letter.
Example:
<script>
//Declaring class
class Employee
{
//Initializing an object
constructor(id,name)
{
this.id=id;
this.name=name;
}
//Declaring method
detail()
{
document.writeln(this.id+" "+this.name+"<br>")
}
}
//passing object to a variable
var e1=new Employee(101,"Martin Roy");
var e2=new Employee(102,"Duke William");
e1.detail(); //calling method
e2.detail();
</script>
Output:
Unlike function declaration, the class declaration is not a part of JavaScript hoisting. So,
it is required to declare the class before invoking it.
<script>
//Here, we are invoking the class before declaring it.
var e1=new Employee(101,"Martin Roy");
var e2=new Employee(102,"Duke William");
e1.detail( ); //calling method
e2.detail( );
//Declaring class
class Employee
{
//Initializing an object
constructor(id, name)
{
this.id=id;
this.name=name;
}
detail( )
{ document.writeln(this.id+" "+this.name+"<br>") }
}
</script>
Output:
JavaScript Objects
A JavaScript object is an entity having state and behaviour (properties and method). For
example: car, pen, bike, chair, glass, keyboard, monitor etc.
Syntax:
object={property1:value1,property2:value2.....propertyN:valueN}
<script>
emp={id:102,name:"Shyam Kumar",salary:40000}
document.write(emp.id+" "+emp.name+" "+emp.salary);
</script>
Output:
Syntax:
var objectname=new Object();
Output:
Here, you need to create function with arguments. Each argument value can be assigned
in the current object by using this keyword.
The this keyword refers to the current object.
The example of creating object by object constructor is given below:
<script>
function emp(id,name,salary){
this.id=id;
this.name=name;
this.salary=salary;
}
e=new emp(103,"Vimal Jaiswal",30000);
Output:
We can define method in JavaScript object. But before defining method, we need to add
property in the function with the same name as method.
<script>
function emp(id,name,salary){
this.id=id;
this.name=name;
this.salary=salary;
this.changeSalary=changeSalary;
function changeSalary(otherSalary){
this.salary=otherSalary;
}
}
e=new emp(103,"Sonoo Jaiswal",30000);
document.write(e.id+" "+e.name+" "+e.salary);
e.changeSalary(45000);
Constructor
A JavaScript constructor method is a special type of method which is used to initialize
and create an object. It is called when memory is allocated for an object.
Points to remember:
The constructor keyword is used to declare a constructor method.
The class can contain one constructor method only.
JavaScript allows us to use parent class constructor through super keyword.
<script>
class Employee {
constructor() {
this.id=101;
this.name = "Martin Roy"; } }
var emp = new Employee();
document.writeln(emp.id+" "+emp.name);
</script>
Output:
<script>
class CompanyName
{
constructor()
{
this.company="Javatpoint";
}
}
class Employee extends CompanyName {
constructor(id,name) {
super();
this.id=id;
this.name=name;
}
}
Output:
Message Passing
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 behaviour of its parent
class.
Points to remember
document.writeln("Current date:")
document.writeln(m.getDate()+"-"+(m.getMonth()+1)+"-"+m.getFullYear());
</script>
Output:
Output:
Polymorphism
Example-2
<script>
class Shape
{
area()
{
return 0;
}
}
class Circle extends Shape
{
constructor(r){
super();
this.radius = r;
}
area(){
document.write("Area of circle is:"+3.14*this.radius**2);
}
}
class Square extends Shape
{
constructor(w,h)
{
super();
this.width=w;
this.height=h;
}
area()
{
document.write("<br> area of square is::"+this.width * this.height);
}
}
var c=new Circle(2);
var s=new Square(2,4);
c.area();
s.area();
</script>