JavaScript Classes

Before the JavaScript ES6, The JavaScript is not the pure object oriented language. Before the JavaScript ES6 still we are able to create the classes and object of the classes in JavaScript. 

For the JavaScript ES6 class example click here.

Before the JavaScript ES6 we can define the classes in JavaScript using the function keyword, Here first we have to create the function with your class name and after that you can create the object of that function using the new keyword.

Syntax:

function YourClassName() {

}

var YourObjectName = new YourClassName();

JavaScript Class’s Property:

We also can be able to create the data member or the properties in the class that are available to the all the existing methods of the function. We can create the data members or the properties in the two way

1. Using the this keyword, So that variable will be accessible to all the methods of the function using the this keyword. When you type this and dot(.) than it is accessible.
2. Without this and var, if you directly write the variable name and assign the value to it than it is also available to all the methods.

Notes:

1. If you are creating the properties of the class using the var than it is not available to the methods of the class which defined the outside of the class.
2. If you define the properties using the this keyword than you must be have to use the this keyword everywhere before accessing the variable.
3. If you define the properties without the this and var, than you have to accessing the variable in the methods directly with the name.

Syntax:

function YourClassName() {
    this.FirstProperty = "JavaScript";
    SecondProperty = "Hive";
}

var YourObjectName = new YourClassName();

I recommended to you to use this keyword while defining the properties in the class. So it is easy to accessing the variable in every methods of the function, some smart auto compilation IDE will directly showing the name of the properties when you type this..

JavaScript Class Method.

In JavaScript class methods we can also able to create the methods of the class. Here we can create the methods in the JavaScript class in 2 ways.

1. Defining the methods in the Class.
2. Defining the methods in the prototype of the class (Outside the class).

Method 1:

function YourClassName() {
    this.FirstProperty = "JavaScript";
    SecondProperty = "Hive";

    this.CombineString1 = function () {
        alert("Inner Method: " + this.FirstProperty + " " + SecondProperty);
    }
}

Method 2:

YourClassName.prototype.CombineString2 = function () {
    alert("Method in prototype: " + this.FirstProperty + " " + SecondProperty);
}

In Method 1 we are directly defined the method inside the function, but Method 1 is not good when there are too many methods and function in the class because it is too much difficult find the where the method is created and the size of the class is become too large.

In Method 2 we are defined the method outside the function, and inside the prototype, here both methods work same and available to all the object of the class.

It is best practice to use the method 2 to define the method in the class, because it is easy to maintain and debug.

We can call the above function like this:

var YourObjectName = new YourClassName();

YourObjectName.CombineString1();
YourObjectName.CombineString2();

Static Method

In JavaScript we can also create the static method in the classes, as per the rules of the other OOPs language in JavaScript also we have to call the static method using the class name directly. So for calling the static method we does not need to create the object.

Example:

function YourClassName() {
    this.FirstProperty = "JavaScript";
    SecondProperty = "Hive";
}

YourClassName.StaticMethod = function () {
    alert("I am static method " + this.FirstProperty + " " + SecondProperty);
}

YourClassName.StaticMethod();

If you run the above program than you find that the value of the this.FirstProperty is undefined because in the JavaScript function, JavaScript every times create the new instance of the this that represent the current function.

Example:

function Person() {
    this.FirstName = "";
    this.LastName = "";
}

Person.prototype.SetFirstName = function (firstName) {
    this.FirstName = firstName;
}

Person.prototype.GetFirstName = function () {
    return this.FirstName;
}

Person.prototype.SetLastName = function (lastName) {
    this.LastName = lastName;
}

Person.prototype.GetLastName = function (lastName) {
    return this.GetLastName;
}

Person.prototype.DisplayWeclomeMessage = function () {
    alert("Welcome, " + this.FirstName + " " + this.LastName);
}

var objPersone = new Person();
objPersone.DisplayWeclomeMessage(); // Welcome,

objPersone.SetFirstName("Mr James");
objPersone.SetLastName("Bond");

objPersone.DisplayWeclomeMessage(); // Welcome, Mr James Bond

In above examples we create the class and the getter and setter methods of the property. We also create the one method that will display the welcome message, When first we call that method without the setting first and last than it display the only “Welcome,” after setting the FirstName and LastName than it display the complete welcome message.

If you still have any question related to this, please comment down below…

Happy Coding...

🙂