JavaScript

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
  1. <script type="text/javascript">  
  2. function Employee()  
  3. {  
  4.     var empID = 1142;  
  5.     this.empFirstName = "Yogesh";  
  6.     this.empLastName = "Jaiswal";  
  7.     this.getEmployeeDetail = function(){  
  8.     alert("EmployeeID : " + empID + " Employee Name : " +  
  9.     this.empFirstName + " " + this.empLastName);  
  10.     };  
  11. }  
  12. function main()  
  13. {  
  14.     var objEmployee = new Employee();  
  15.     objEmployee.getEmployeeDetail(); //EmployeeID : 1142  
  16.     // Employee Name : Yogesh Jaiswal  
  17.     alert(objEmployee.empFirstName); //Yogesh  
  18.     alert(objEmployee.empLastName); //Jaiswal  
  19.     alert(objEmployee.empID); //undefined because empID is private variable.  
  20. }  
  21. </script> 
HTML Code
  1. <div>  
  2. <asp:Button ID="btnCallmain" runat="server" Text="CallMain"  
  3. OnClientClick="javascript:main();"/>  
  4. </div> 
Example 2
  1. <script type="text/javascript">  
  2. function Employee(id,fname,lname){  
  3. var empID=id;  
  4. var empFName = fname;  
  5. var empLName = lname;  
  6. this.showEmployeeDetail = function(){  
  7. alert("EmployeeID : " + empID + " Employee Name : " + empFName + " " +  
  8. empLName);  
  9. }  
  10. }   
  11. function main(){  
  12. var objEmployee = new Employee(5,"Yogesh","Jaiswal");  
  13. objEmployee.showEmployeeDetail();  
  14. }  
  15. </script> 
HTML Code
  1. <div>  
  2. <asp:Button ID="btnCallmain" runat="server" Text="CallMain"  
  3. OnClientClick="javascript:main();"/>  
  4. </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
  1. <script type="text/javascript">    
  2. var Employee ={    
  3. "empID":"",    
  4. "empFirstName":"",    
  5. "empLastName":"",    
  6. "setValues":function(id,fname,lname){    
  7. this.empID = id;    
  8. this.empFirstName = fname;    
  9. this.empLastName = lname;    
  10. },    
  11. "getValues":function(){    
  12. alert(this.empID + " " + this.empFirstName + " " +    
  13. this.empLastName);    
  14. }    
  15. }    
  16.      
  17. function main(){    
  18. Employee.setValues("1142″,"Yogesh","Jaiswal");    
  19. Employee.getValues();    
  20. }    
  21. </script>   
HTML Code
  1. <div>  
  2. <asp:Button ID="btnCallmain" runat="server" Text="CallMain"  
  3. OnClientClick="javascript:main();"/>  
  4. </div> 
Inheritance in JavaScript
  1. function Employee(){  
  2. var empID;  
  3. var empAge;  
  4. var empName;  
  5. this.setEmployee = function(id,age,name){  
  6. empID = id;  
  7. empAge = age;  
  8. empName = name;  
  9. };  
  10.   
  11. function Employee(){  
  12. var empID;  
  13. var empAge;  
  14. var empName;  
  15. this.setEmployee = function(id,age,name){  
  16. empID = id;  
  17. empAge = age;  
  18. empName = name;  
  19. };  
  20. this.getEmployee = function(){  
  21. return "Employeee Name : " + empName + ", EmployeeID :" + empID + ",  
  22. Employee Age : " + empAge;  
  23. }  
  24. }  
  25.   
  26. function Departmnt(){  
  27. this.inheritFrom = Employee;  
  28. this.inheritFrom();  
  29. var departmentID;  
  30. var departmentName;  
  31. this.setDepartment = function(depID,depName){  
  32. departmentID = depID;  
  33. departmentName= depName;  
  34. };  
  35. this.getWholeEmpDetail = function(){  
  36. alert(this.getEmployee() + " DepartmntID : " + departmentID + ",  
  37. Department Name : " + departmentName);  
  38. };  
  39. }   
  40. function main(){  
  41. var objDepartment = new Departmnt();  
  42. objDepartment.setEmployee(1127,"Yogesh Jaiswal");  
  43. objDepartment.setDepartment("IT","Development");  
  44. objDepartment.getWholeEmpDetail();  
  45. } 
HTML Code
  1. <div>  
  2. <asp:Button ID=Button1 runat="server" Text="CallMain"  
  3. OnClientClick="javascript:main();"/>  
  4. </div> 

Up Next
    Ebook Download
    View all
    Learn
    View all
    Membership not found