OOPs in Javascript
In programming languages, we often say an object is an instance of a class. This means that by using a class I can create many objects & that all share methods and properties. In javascript, everything is an object.
Javascript classes introduced in ECMAScript 2015 are primarily syntactical sugar over javascript’s existing prototype-based inheritance.
A class is a type of function but instead of using the keyword function to initiate it we use the word class and the properties are assigned inside a constructor() method. A class is a user-defined prototype from which objects are created. It represents the set of properties or methods that are common to all objects of one type.
For Free, Demo classes Call: 020-71173125
Registration Link: Click Here!
The instance method can be inherited but the static method can not be. For creating a static method just add a static word before the method.
There are certain features or mechanisms which make a Language Object-Oriented like:
- Objects
- Classes
- Encapsulation
- Abstraction
- Inheritance
- Polymorphism
Objects:
An Object is a unique entity that contains properties and methods. The characteristics of an Object are called Properties in Object-Oriented Programming and the actions are called methods. An Object is an instance of a class. Objects are everywhere in JavaScript, almost every element is an Object whether it is a function, array, or string. SevenMentor is the best place you can opt for learning Java Course in Pune.
The object can be created in two ways in JavaScript:
Example: Using an Object Literal.
<script>
Defining object:-
let person = {
first_name:’Sachin’,
last_name: ‘Tendulkar’,
method:-
info : function(){
return (`The name of the person is
${person.first_name} ${person.last_name}`)
},
object within object:-
phone_number : {
mobile:’12345′,
landline:’6789′
}
}
document.write(person.info()+”<br>”);
document.write(“Landline NO.”+person.phone_number.landline);
// Using a constructor
function person(first_name,last_name){
this.first_name = first_name;
this.last_name = last_name;
}
// Creating new instances of person object
let person1 = new person(‘Sachin’,’Tendulkar’);
let person2 = new person(‘Rahul’,’Dravid’);
document.write(person1.first_name+”<br>”);
document.write(`${person2.first_name} ${person2.last_name}`);
</script>
Classes:-
Classes are used to create objects. Classes are just like templates which has properties and methods. These properties are given to objects by defaults. Following example illustrates classes in javascript.
<script>
// Defining class using
class Student
{
constructor(name, marks, grade)
{
this.name = name;
this.marks = marks;
this.grade = grade;
}
getDetails()
{
return (`The name of the student is ${this.name}.`)
}
}
// Making object with the help of the constructor
let s1 = new Student(‘ABC’, 80, ‘A’);
let s2 = new Student(‘XYZ’, 65, ‘B’);
document.write(s1.name+”<br>”);
document.write(s2.marks+”<br>”);
document.write(s1.getDetails());
</script>
For Free, Demo classes Call: 020-71173125
Registration Link: Click Here!
Object.create method:-
Following example illustrates how to create object using object.create method.
<script>
// Object.create() example
const coder =
{
Subject : “FSD”,
printIntroduction : function()
{
document.write(`My name is ${this.name}. Am I
studying: ${this.Subject}.`)
}
}
// Object.create() method
const me = Object.create(coder);
me.name = ‘ABC’;
me.Subject = “React”;
me.printIntroduction();
</script>
Inheritance:- It is the concept of javascript where base class and derived class. A derived class can inherit all the properties and methods of the base class. A derived class can have its own properties and methods also. The following example illustrates inheritance where we have students as the base class and players as the derived class. The player class can access all the properties and methods of the student’s classes. To access base class properties we use the super() method.
<!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>
</head>
<body>
<script>
class Students
{
constructor(name,age,course)
{
this.myName=name;
this.myAge=age;
this.myCourse=course;
}
info()
{
return `Hello!! My name is ${this.myName}.<br>I am ${this.myAge} years old and my course is ${this.myCourse}<br>`;
}
}
// Inheritance
class Players extends Students
{
constructor(name,age,course,game)
{
super(name,age,course);
this.myGame=game;
}
player_info()
{
return `${super.info()}. I am player of ${this.myGame}<br>`;
}
}
// let obj1=new Students(“ABC”,30,”FSD”);
// let obj2=new Students(“XYZ”,35,”WEB”);
let obj1=new Players(“ABC”,30,”FSD”,”Football”);
let obj2=new Players(“XYZ”,35,”WEB”,”Cricket”);
document.write(obj1.player_info());
document.write(obj2.player_info());
</script>
</body>
</html>
Polymorphism:- Polymorphism means multiple forms. In this concept, we can have many forms of a particular element. In the following example, we are creating multiple forms of display() function which is called function overloading. SevenMentor offers the Best Java training in Pune.
<script>
class Employee
{
constructor(name,age,salary,address,expr)
{
this.myname=name;
this.myage=age;
this.mysalary=salary;
this.myaddress=address;
this.myexpr=expr;
}
display()
{
console.log(`My name is ${this.myname} and age is ${this.myage}.My salary is ${this.mysalary}`);
}
}
class Employee1 extends Employee
{
constructor(name,age,salary,address)
{
super(name,age,salary);
this.myaddress=address;
}
display()
{
console.log(`My address is ${this.myaddress}`);
}
}
class Employee2 extends Employee1
{
constructor(name,age,salary,address,expr)
{
super(name,age,salary,address);
this.myexpr=expr;
}
display()
{
console.log(`I have ${this.myexpr} years experience`);
}
}
let obj1=new Employee(“ABC”,30,50000);
let obj2=new Employee1(“ABC”,30,50000,”Pune”);
let obj3=new Employee2(“ABC”,30,50000,”Pune”,10);
obj1.display();
obj2.display();
obj3.display();
</script>
For Free, Demo classes Call: 020-71173125
Registration Link: Click HJavaere!
Encapsulation:- When we are defining all properties and methods of in a single class only then it is called as encapsulation.
e.g.:-
<script>
class Employee
{
constructor(name,age,salary,address,expr)
{
this.myname=name;
this.myage=age;
this.mysalary=salary;
this.myaddress=address;
this.myexpr=expr;
}
display()
{
console.log(`My name is ${this.myname} and age is ${this.myage}.My salary is ${this.mysalary}`);
}
display1()
{
console.log(`My address is ${this.myaddress}`);
}
display2()
{
console.log(`I have ${this.myexpr} years experience`);
}
}
let obj1=new Employee(“ABC”,30,50000,”Pune”,10);
obj1.display();
obj1.display1();
obj1.display2();
</script>
Author:
| SevenMentor Pvt Ltd.
© Copyright 2021 | SevenMentor Pvt Ltd.