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 reader level is 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 intentionallly, 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 class-less, or in other words it is called a class-less programming language. In JavaScript everything is an object or represents an object. But dear reader, 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 style of function
We can implement a class using a function. Try to understand the example below.
<%@ 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 printInfo() {
alert("Name:- " + this.name + " surname:- " + this.surname);
}
function person(name, surname)
{
this.name = name;
this.surname = surname;
this.print = printInfo;
}
var p = new person('Sourav', 'Kayal');
p.print();
</script>
</form>
</body>
</html>
Here we have defined a person function that acts as 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.
function person(name, surname)
{
this.name = name;
this.surname = surname;
this.print = function () {
alert("Name:- " + this.name + " surname:- " + this.surname);
}
}
var p = new person('Sourav', 'Kayal');
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.
<%@ 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>
//Create class using var keyword
var person = {
name:"Ajay",
surname:"Jyoshi",
print: function () {
alert("Name:- " + this.name + " Surname:-" + this.surname);
}
};
person.print();
</script>
</form>
</body>
</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.
<%@ 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>
//Create class using var keyword and function
var person = new function () {
this.name ="Nontey";
this.surname = "Banerjee";
this.print = function () {
alert("Name:- " + this.name + " Surname:-" + this.surname);
}
};
person.print();
</script>
</form>
</body>
</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 of JavaScript.