Various Syntaxes For Implementing Classes in JavaScript

RamaSagar Pulidindi
Mar 25, 2014
2.7k
0
0
Article

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.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
</head>
<body>
<form id="form1" runat="server">
<script>
function samplefun(){
this.name = "LoneSurvivor";
this.type = "Movie";
this.showMovie = function () {
alert("Name:- " + this.name + "Type:-" + this.type);
}
}
var b = new samplefun();
b.showMovie();
</script>
</form>
</body>
</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.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
</head>
<body>
<form id="form1" runat="server">
<script>
var movie = function(name,type){
this.name = name;
this.type = type;
this.showMovie = function () {
alert("Name:- " + this.name + "Type:-" + this.type);
}
}
var b = new movie("American Hustle", "Drama");
b.showMovie();
</script>
</form>
</body>
</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.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
</head>
<body>
<form id="form1" runat="server">
<script>
var movie = new Object();
movie.name = "Dallas Buyers Club";
movie.type = "Biography";
movie.Info = function () {
alert("Name:- " + this.name + "Type:- "+ this.type);
};
movie.Info();
</script>
</form>
</body>
</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.