Post
Ask Question

Advanced JavaScript: Understand “class”-ical Concept of JavaScript

Introduction

 
We will not talk about any singing (classical song) style here. This is the Advanced JavaScript article series. Here we are understanding various concepts of advanced JavaScript programming. (Though I notice that the reading level is a beginner in previous articles). Anyway, here are all the links to our previous articles.
The tile of this article is a bit confusing. It was done that way intentionally, otherwise, you may not be here. We will talk about "class" in JavaScript.
 
Let's confess the truth, "There is no class in JavaScript". Wo!!.. What a class-isc language!. Being an Object Oriented Programming language, it's classless, or in other words, it is called a class-less programming language. In JavaScript, everything is an object or represents an object. But dear readers, we will not lose our hope. We will try to implement a class (or a formation of a class) in JavaScript.
 
As we have explained, there is no class in JavaScript so obviously the concept of OOP related to classes must not be there. But in this article, we will try to implement them (though very little).
 
In JavaScript, we can implement a class (again saying, a flavor of a class) in three ways. Let's try those examples.
 
In the style of function
 
We can implement a class using a function. Try to understand the example below.
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>    
  2. <!DOCTYPE html>    
  3. <html xmlns="http://www.w3.org/1999/xhtml">    
  4. <head runat="server">    
  5. </head>    
  6. <body>    
  7.     <form id="form1" runat="server">    
  8.         <script>     
  9.             function printInfo() {    
  10.                 alert("Name:- " +  this.name + " surname:- " + this.surname);    
  11.             }    
  12.             function person(name, surname)    
  13.             {    
  14.                 this.name = name;    
  15.                 this.surname = surname;    
  16.                 this.print = printInfo;    
  17.             }    
  18.             var p = new person('Sourav', 'Kayal');    
  19.             p.print();     
  20.         </script>    
  21.     </form>    
  22. </body>    
  23. </html> 
    Here we have defined a person function that acts like a class, it has two properties and one method. We are passing data by creating a new object of person.
     
    Here is the sample output: 
     
    show javascript properties
     
    Ok, you are complaining, why is the method outside of the class? Here is a compressed version for you.
    1. function person(name, surname)    
    2. {    
    3.       this.name = name;    
    4.       this.surname = surname;    
    5.       this.print = function () {    
    6.           alert("Name:- " + this.name + " surname:- " + this.surname);    
    7.       }    
    8. }    
    9. var p = new person('Sourav', 'Kayal');    
    10. p.print(); 
    The output will be the same.
     

    Class using object literal

     
    This is the second style to implement a class in JavaScript. We will create a class using our favorite var keyword. Have a look at the following code.
    1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>    
    2. <!DOCTYPE html>    
    3. <html xmlns="http://www.w3.org/1999/xhtml">    
    4. <head runat="server">    
    5. </head>    
    6. <body>    
    7.     <form id="form1" runat="server">    
    8.         <script>    
    9.             //Create class using var keyword    
    10.             var person = {    
    11.                 name:"Ajay",    
    12.                 surname:"Jyoshi",    
    13.                 print: function () {    
    14.                     alert("Name:- " + this.name + " Surname:-" + this.surname);    
    15.                 }    
    16.             };    
    17.             person.print();     
    18.         </script>    
    19.     </form>    
    20. </body>    
    21. </html> 
    Here is the output of the code above:
     
    show javascript class properties
     
    This is another style to implement a class, though we are setting a property within the class. You are seeing that in this case, we are not creating an instance of the class. And there is even no scope to create an instance, so let's consider its singleton class in JavaScript.
     

    Create function and attach to var

     
    This is nearly the same as the example above. Here we will create one variable and will attach a function within it.
    1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>    
    2. <!DOCTYPE html>    
    3. <html xmlns="http://www.w3.org/1999/xhtml">    
    4. <head runat="server">    
    5. </head>    
    6. <body>    
    7.     <form id="form1" runat="server">    
    8.         <script>     
    9.             //Create class using var keyword and function    
    10.             var person = new function () {    
    11.                 this.name ="Nontey";    
    12.                 this.surname = "Banerjee";    
    13.                 this.print = function () {    
    14.                     alert("Name:- " + this.name + " Surname:-" + this.surname);    
    15.                 }    
    16.             };     
    17.             person.print();     
    18.         </script>    
    19.     </form>    
    20. </body>    
    21. </html> 
    This is very related to the example above. So, no need to explain again. Here is the output.
     
    show javascript function
     

    Conclusion

     
    In this example, we saw how to implement a class in JavaScript. I hope you have enjoyed this article. Stay with us to learn more funny stuff about JavaScript. 


    Similar Articles