Classes in JavaScript

Introduction

I was busy one day, creating a Windows 8 application. I felt at one point like using a class. Actually I wanted to create a custom list of mine for fetching data from the JSON result that one of my WCF services was returning. I know JavaScript is an object oriented programming language, but as soon as I typed in the keyword "class", Visual Studio, without even realizing the pain of my broken heart, refused to compile the code.

It was really puzzling. After a few minutes of struggling and 2 to 3 cups of hot coffee, I got that long awaited, Eureka moment. One line that attracted my attention the most was, "though JavaScript is an object oriented programming language, it is prototype based, not class based". In JavaScript, everything is an object. In order to get the idea of what we are talking about, let's write some code.

Using the Code

Create a new Windows 8 application. If you are unfamiliar with how to do that, get that from here. Somewhere in the default.js file, create the following function prototype:

function MyClass()
{
    this.FirstName;
    this.LastName;
    this.fullName =  function Name()
    {
           return this.FirstName + " "  + this.LastName;
    }
}

The code above is a function but we can create objects of it, just like as we do with classes. The variables FirstName and LastName are the properties (so called as data members in OOP) and fullName will possess the result returned by the function Name() (called as the member function). The use of the method above is simple here; is the code block describing its use case:

var myObject = new MyClass();
myObject.FirstName = "Neelesh";
myObject.LastName = "Vishwakarma";
var fN = myObject.fullName();

We can create the object using the new keyword and by using the so called dot operator, we can access its internal properties. Calling fullName will return the combination of both FirstName and LastName, that will get stored in the variable fN. Here is the entire code of my default.js file:

 (function () {
    "use strict";
 
    WinJS.Binding.optimizeBindingReferences = true;
 
    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;
   
    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
 
                var myObject = new MyClass();
                myObject.FirstName = "Neelesh";
                myObject.LastName = "Vishwakarma";
                var fN = myObject.fullName();
                Name.innerText = fN;
 
            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
            }
            args.setPromise(WinJS.UI.processAll());
        }
    };
 
    app.oncheckpoint = function (args) {
       
    };
 
    app.start();
 
    function MyClass() {
        this.FirstName;
        this.LastName;
        this.fullName =  function Name() {
            return this.FirstName + " "  + this.LastName;
        }
 
    }
 
})();

As you can see, the code will only execute once, at the application startup. Also the Name "infN" has been displayed on the UI via the paragraph tag. This is simply how classes are created and used in JavaScript. Stay tuned!

Happy reading!!!