Implement class in JavaScript.

Sourav.Kayal
Posted by in JavaScript category on for Beginner level | Points: 250 | Views : 3674 red flag

In this article we will learn how to implement class in JavaScript.

Implement class in JavaScript.

In this article we will try to implement class in JavaScript application. Being a object oriented programming, JavaScript is class less. Means there is no concept of class in JavaScript ,But we can implement like class using function and object in JavaScript.

So, when we will implement class using function and object , we will call them as class. Though ,WWW staring committee and Mozilla developer group are saying that there is no class in JavaScript. In below example we will see how to implement class in various ways.

Implement class using function

This is the first option to implement class in JavaScript. We know that almost everything in JavaScript is object and function belongs to same group. We can implement like class using function. Generally class contains property/data member and method. In function body we can implement same. Try to understand below code.

 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
</head>
<body>
    <form id="form1" runat="server">
        <script>
            function fun(){
 
                this.name = "Kingfisher";
                this.type = "Strong";
                this.showBeer = function () {
                    alert("Name:- " + this.name + "Type:-" + this.type);
                }
            }
 
            var b = new fun();
            b.showBeer();
 
 
        </script>
    </form>
</body>
</html>

In this example the “fun” function has two properties and one method to show the value of both properties. Though ,we can add any number of property and method in this type of class.


Define class using constructor style

In above example we have set static data in data member ,but in real time application ,it’s very much possible to set dynamic data in data member. In this example we will see how to set data to member using constructor.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
</head>
<body>
    <form id="form1" runat="server">
        <script>
            var beer = function(name,type){
                this.name = name;
                this.type = type;
                this.showBeer = function () {
                    alert("Name:- " + this.name + "Type:-" + this.type);
                }
            }
 
            var b = new beer("Froster", "Mild");
            b.showBeer();
 
 
        </script>
    </form>
</body>
</html>

We can observer that in time of object creation we are passing value to class.


 And obviously we can define more than one function in class, here is one example.

<form id="form1" runat="server">
        <script>
 
            var beer = function(name,type){
                this.name = name;
                this.type = type;
                this.showBeer = function () {
                    alert("Name:- " + this.name + "Type:-" + this.type);
                };
                this.Status = function () {
                    alert("Half empty");
                }
 
            }
 
            var b = new beer("Froster", "Mild");
            // Call ShowBeer function.
            b.showBeer();
            //Call to status function
            b.Status();
 
        </script>
    </form>
Create class using Object

This is another style to implement class with the help of Object() . Like class we can set data member and function member into it.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
</head>
<body>
    <form id="form1" runat="server">
        <script>
            var beer = new Object();
            beer.name = "Black Label";
            beer.type = "Strong";
            beer.Info = function () {
                alert("Name:- " + this.name + "Type:- "this.type);
            };
            beer.Info();
        </script>
    </form>
</body>
</html>

In this example we have implemented class with the help of var keyword. Here is sample output.


Implementation of inheritance

As we have implemented class with the help of function, we can implement concept of inheritance in this type of class. Here is sample code of inheritance in JavaScript class.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
</head>
<body>
    <form id="form1" runat="server">
        <script>
            function fun1() {
                this.name = "fun1";
            }
            fun1.prototype.ShowInfo = function(){
                alert(this.name);
            }
            function fun2() {
                this.name = "fun2";
            }
            fun2.prototype = fun1.prototype;
 
            var v = new fun2();
            v.ShowInfo();
 
 
        </script>
    </form>
</body>
</html>

We are seeing that showInfo() function is defined in fun1() but we are accessing this function by creating object of fun2() because fun2() is inherited from fun1().


 Conclusion

In this article we have learned how to implement class using JavaScript with the help of function and Object(). Hope you have understood the concept.

Page copy protected against web site content infringement by Copyscape

About the Author

Sourav.Kayal
Full Name: Sourav Kayal
Member Level: Silver
Member Status: Member,MVP
Member Since: 6/20/2013 2:09:01 AM
Country: India
Read my blog here http://ctrlcvprogrammer.blogspot.in/
http://www.dotnetfunda.com
I am .NET developer working for HelixDNA Technologies,Bangalore in healthcare domain. Like to learn new technology and programming language. Currently working in ASP.NET ,C# and other microsoft technologies.

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)