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. }
  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. };
  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. }
  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>