Post
Ask Question

Various Syntaxes For Implementing Classes in JavaScript

Introduction

 
In this article we will learn about various syntaxes for defining a class in JavaScript. JavaScript arrays are used to store multiple values in a single variable.
 
We can implement a class using a function. Generally a class contains property/data members and methods.
  1. <!DOCTYPE html>    
  2. <html xmlns="http://www.w3.org/1999/xhtml">    
  3. <head runat="server">    
  4. </head>    
  5. <body>    
  6.     <form id="form1" runat="server">    
  7.         <script>    
  8.             function samplefun(){    
  9.      
  10.                 this.name = "LoneSurvivor";    
  11.                 this.type = "Movie";    
  12.                 this.showMovie = function () {    
  13.                     alert("Name:- " + this.name + "Type:-" + this.type);    
  14.                 }    
  15.             }    
  16.      
  17.             var b = new samplefun();    
  18.             b.showMovie();    
  19.      
  20.      
  21.         </script>    
  22.     </form>    
  23. </body>    
  24. </html>   
In the preceding example the “samplefun” function has two properties and one method to show the value of both properties. We can however add any number of properties and methods in this type of class.
 
 
In the following, we have set static data in a data member, but in an actual application, it's very possible to set dynamic data in a data member. In this example we will see how to set data to a member using a constructor.
  1. <!DOCTYPE html>    
  2. <html xmlns="http://www.w3.org/1999/xhtml">    
  3. <head runat="server">    
  4. </head>    
  5. <body>    
  6.     <form id="form1" runat="server">    
  7.         <script>    
  8.             var movie = function(name,type){    
  9.                 this.name = name;    
  10.                 this.type = type;    
  11.                 this.showMovie = function () {    
  12.                     alert("Name:- " + this.name + "Type:-" + this.type);    
  13.                 }    
  14.             }    
  15.      
  16.             var b = new movie("American Hustle", "Drama");    
  17.             b.showMovie();    
  18.      
  19.      
  20.         </script>    
  21.     </form>    
  22. </body>    
  23. </html>   
 
 
The following is another way to implement a class using Object(). Like a class, we can set data members and function members to it.
  1. <!DOCTYPE html>    
  2. <html xmlns="http://www.w3.org/1999/xhtml">    
  3. <head runat="server">    
  4. </head>    
  5. <body>    
  6.     <form id="form1" runat="server">    
  7.         <script>    
  8.             var movie = new Object();    
  9.             movie.name = "Dallas Buyers Club";    
  10.             movie.type = "Biography";    
  11.             movie.Info = function () {    
  12.                 alert("Name:- " + this.name + "Type:- "+  this.type);    
  13.             };    
  14.             movie.Info();    
  15.         </script>    
  16.     </form>    
  17. </body>    
  18. </html>   
 
 

Summary

 
In this article, we learned various implementations of a class in JavaScript. In a future article, we will learn some more basic concepts of JavaScript.


Similar Articles