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.