Classes in JavaScript

Introduction

 

In JavaScript, there are no classes but functions can be used to somewhat simulate classes. Everything is an object in JavaScript so inheritance in JavaScript means objects inherits from objects, not classes.

 

Ways to Implement Classes in JavaScript

 

We can define a normal JavaScript function and then create an object by using the new keyword. To define properties and methods use this keyword.

 

Example 1

<script type="text/javascript">
function Employee()
{
    var empID = 1142;
    this.empFirstName = "Yogesh";
    this.empLastName = "Jaiswal";
    this.getEmployeeDetail = function(){
    alert("EmployeeID : " + empID + " Employee Name : " +
    this.empFirstName + " " + this.empLastName);
    };
}
function main()
{
    var objEmployee = new Employee();
    objEmployee.getEmployeeDetail(); //EmployeeID : 1142
    // Employee Name : Yogesh Jaiswal
    alert(objEmployee.empFirstName); //Yogesh
    alert(objEmployee.empLastName); //Jaiswal
    alert(objEmployee.empID); //undefined because empID is private variable.
}
</script>

HTML Code

<div>
<asp:Button ID="btnCallmain" runat="server" Text="CallMain"
OnClientClick="javascript:main();"/>
</div>

Example 2

<script type="text/javascript">
function Employee(id,fname,lname){
var empID=id;
var empFName = fname;
var empLName = lname;
this.showEmployeeDetail = function(){
alert("EmployeeID : " + empID + " Employee Name : " + empFName + " " +
empLName);
}
}
function main(){
var objEmployee = new Employee(5,"Yogesh","Jaiswal");
objEmployee.showEmployeeDetail();
}
</script>

HTML Code

<div>
<asp:Button ID="btnCallmain" runat="server" Text="CallMain"
OnClientClick="javascript:main();"/>
</div>

We can create a class using JSON too. While we use JSON to create a class then an oObject is also initiated at that same time, we don't have to create an object of that class separately.

 

Example 1

<script type="text/javascript">
var Employee ={
"empID":"",
"empFirstName":"",
"empLastName":"",
"setValues":function(id,fname,lname){
this.empID = id;
this.empFirstName = fname;
this.empLastName = lname;
},
"getValues":function(){
alert(this.empID + " " + this.empFirstName + " " +
this.empLastName);
}
}

function main(){
Employee.setValues("1142″,"Yogesh","Jaiswal");
Employee.getValues();
}
</script>

HTML Code

<div>
<asp:Button ID="btnCallmain" runat="server" Text="CallMain"
OnClientClick="javascript:main();"/>
</div>

Inheritance in JavaScript

function Employee(){
var empID;
var empAge;
var empName;
this.setEmployee = function(id,age,name){
empID = id;
empAge = age;
empName = name;
};

function Employee(){
var empID;
var empAge;
var empName;
this.setEmployee = function(id,age,name){
empID = id;
empAge = age;
empName = name;
};
this.getEmployee = function(){
return "Employeee Name : " + empName + ", EmployeeID :" + empID + ",
Employee Age : " + empAge;
}
}

function Departmnt(){
this.inheritFrom = Employee;
this.inheritFrom();
var departmentID;
var departmentName;
this.setDepartment = function(depID,depName){
departmentID = depID;
departmentName= depName;
};
this.getWholeEmpDetail = function(){
alert(this.getEmployee() + " DepartmntID : " + departmentID + ",
Department Name : " + departmentName);
};
}
function main(){
var objDepartment = new Departmnt();
objDepartment.setEmployee(1127,"Yogesh Jaiswal");
objDepartment.setDepartment("IT","Development");
objDepartment.getWholeEmpDetail();
}

HTML Code

<div>
<asp:Button ID=Button1 runat="server" Text="CallMain"
OnClientClick="javascript:main();"/>
</div>