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 inherit 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 the 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>